如何处理角6中的多视图
如何处理角6中的多视图
提问于 2018-06-01 19:44:56
我正在构建一个新的角6应用程序，以取代现有的网页。我们希望页面保持相同的布局和流。此页有三列。第一列是父列，然后是子列和大子列。
用户可以从父级开始使用几条不同的路径。他们可以单击列表中的项目并查看详细信息。但是，用户可以单击父程序中的“新”按钮，并在子视图中看到不同的视图。
在这一点上，我不感兴趣的路由，因为我真的不需要一个直接的链接到孩子或孙子。
我正在看和孩子们在一起的路线和转运站。当我运行应用程序时，我的父路径加载，但我没有看到子和子级。我在这里做错了什么？
以下是我所拥有的：
路由
const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: EmailListComponent,
outlet: 'list_panel',
children: [
{
path: '',
pathMatch: 'full',
component: EmptyComponent,
outlet: 'action_panel'
},
{
path: '',
pathMatch: 'full',
component: EmptyComponent,
outlet: 'detail_panel'
}
]}
];app.component.html
<table class="adminTable"
style="margin: 0 auto; min-width: 1100px; height: auto;">
<tr>
<td class="adminCell"
style="vertical-align:top; width:210px; padding:10px;">
<router-outlet name="list_panel"></router-outlet>
</td>
<td class="adminCell"
style="vertical-align:top; width:290px; padding:10px;">
<router-outlet name="action_panel"></router-outlet>
</td>
<td class="adminCell"
style="vertical-align:top; padding:10px;">
<router-outlet name="detail_panel"></router-outlet>
</td>
</tr>
</table>email-list.component.html
<p style="font-weight:bold; font-size:larger;">Campaigns</p>
<table id="campaignList"
style="width:100%; margin:0px; padding:0px; border:0px; border-collapse:collapse;">
<tbody>
<tr>
<td style="font-weight:bold; text-align:left; white-space:nowrap;">Birthdays</td>
<td style="font-weight:bold; text-align:center; white-space:nowrap;">Status</td>
</tr>
<tr *ngFor="let template of templates">
<td>{{ template }}</td>
<td></td>
</tr>
</tbody>
</table>email-list.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router'
@Component({
selector: 'app-email-list',
templateUrl: './email-list.component.html',
styleUrls: ['./email-list.component.css']
})
export class EmailListComponent implements OnInit {
templates = ['Birthday 5-10', 'ResponsiveBDay', 'Testing', 'Birthday2', 'PresidentsDay2018', 'Christmas2017', 'Thanksgiving2017','Columbus Day', 'Labor Day', 'Father Day 2017'];
constructor(
private route: ActivatedRoute,
private router: Router
) { }
ngOnInit() {}
}empty.component.html
<!-- This intentionally blank -->
<p>Empty is working</p>empty.component.ts从“@角/芯”导入{ Component，OnInit }；
@Component({
selector: 'app-empty',
templateUrl: './empty.component.html',
styleUrls: ['./empty.component.css']
})
export class EmptyComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-04 22:08:07
我不知道为什么，但我永远无法使用我的路由表中的子属性来工作。当我把孩子们搬到和父母一样的水平时，我终于能让它发挥作用了。我不确定这是否是新的角度6或什么。
最后的结果如下：
更新的app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CampaignSettingsComponent } from './campaign-settings/campaign-settings.component';
import { EmailListComponent } from './email-list/email-list.component';
import { EmailPreviewComponent } from './email-preview/email-preview.component';
import { EmptyComponent } from './empty/empty.component';
const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: EmailListComponent,
outlet: 'list_panel',
},
{
path: '',
pathMatch: 'full',
component: EmptyComponent,
outlet: 'action_panel'
},
{
path: '',
pathMatch: 'full',
component: EmptyComponent,
outlet: 'detail_panel'
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes,
{enableTracing: false} // for debug only
)
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50650135
复制相关文章
相似问题
腾讯云开发者
