时间戳

首页 > 解决方案 > 如何在 Angular 6 中使用多个视图

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

问题描述

我正在构建一个新的 Angular 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>

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

电子邮件列表.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 从 '@angular/core' 导入 { 组件，OnInit }；

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

  constructor() { }

  ngOnInit() {
  }

}

标签： angularmultiview

解决方案

我不确定原因，但我永远无法使用路由表中的 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 { }

推荐阅读