如何在 Angular 6 中使用多个视图

Question

我正在构建一个新的 Angular 6 应用程序来替换现有页面。我们希望页面保持相同的布局和流程。此页面包含三列。第一列是 parent，然后是 child，最后是 grand child。

从 parent 开始，用户可以采用几种不同的路径。他们可以单击列表中的项目并查看详细信息。但是，用户可以单击 parent 中的 'new' 按钮并在 child 中看到不同的视图。

此时，我对路由不感兴趣，因为我真的不需要直接 link 到 child 或大 child。

我正在查看带有 children 和路由插座的路由。当我运行应用程序时，我的 parent 路径加载但我没有看到 child 和 grand child。我这里做错了什么？

这是我的：

路线

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() {}

}

空.component.html

<!-- This intentionally blank -->
<p>Empty is working</p>

空.component.ts 从 '@angular/core';

导入 { Component, OnInit }

@Component({
  selector: 'app-empty',
  templateUrl: './empty.component.html',
  styleUrls: ['./empty.component.css']
})
export class EmptyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

我不确定其中的原因，但我永远无法使用我的路由 table 中的 children 属性使它真正起作用。当我将 children 移动到与 parent 相同的水平时，我终于能够让它工作了。我不确定这是 Angular 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 { }

如何在 Angular 6 中使用多个视图

How to work with multiple views in Angular 6

multiview

angular