Question

我正在构建一个新的Angular 6应用程序来替换现有页面。我们希望页面保持相同的布局和流程。此页面有三列。第一列是父母，然后是孩子和大孩子。

用户可以从父母开始使用几种不同的路径。他们可以单击列表中的项目并查看详细信息。但是，用户可以点击新的＆＃39;父母的按钮，看到孩子的不同视图。

此时，我对路由不感兴趣，因为我并不需要直接链接到孩子或大孩子。

我正在寻找有孩子和路线的路线。当我运行应用程序时，我的父路径加载但我没有看到孩子和大孩子。我在这里做错了什么？

这就是我所拥有的：

路线

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>

电子邮件-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>

电子邮件-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 从＆＃39; @ angular / core＆＃39;;

导入{Component，OnInit}

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

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

我不确定原因，但我在路由表中使用children属性实际上无法实现此功能。当我将孩子们移动到与父母相同的水平时，我终于能够使它工作。我不确定这对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中使用多个视图

1 个答案: