如何在 Angular 中配置二级路由

Question

我正在尝试学习 Angular 辅助路由的用法，并且我有一个带有自己的路由模块的功能模块。 html模板如下

  <div class="container-fluid">
    <div class ="row" style="background-color:beige">
         <H1>Dashboard</H1>
         <router-outlet></router-outlet>
    </div>

    <div class ="row">
          <div class="col-lg-4" style="background-color:skyblue">
            <H1>Foo</H1>
            <router-outlet name="foo"></router-outlet>
           </div> 
          <div class="col-lg-8" style="background-color:darkseagreen">
            <H1>Bar</H1>
            <router-outlet name="bar"></router-outlet>
           </div> 
    </div>
  </div>

仪表板路由模块是

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FooComponent } from '../foo/foo.component';
import { BarComponent } from '../bar/bar.component';
import { DashboardComponent } from './dashboard.component';

const routes: Routes = [ 
    { path: 'dashboard', component: DashboardComponent},
    { path: 'foo',  component: FooComponent, outlet: "foo" },
    { path: 'bar', component: BarComponent, outlet: "bar" }
 ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
}, )
export class DashboardRoutingModule 

这包含在应用程序模块中 - 其路由具有根级路由。 我的期望是 /dashboard 路径应该显示主要的 DashboardComponent 并显示为次要命名的出口 FooComponent 和 BarComponent 但是 /dashboard 路径只出现 H1 可见标签

我尝试在 plunker 中重现此内容，但无法正常工作 http://plnkr.co/edit/6oSeZDNn6BxIyaDM6uKz?p=preview

如果您知道如何让指定的二级网点工作，请告诉我，或者甚至让 plunker 工作。 :-)

谢谢！ 阿南德

Answer 1

我终于使用子路由完成了这项工作，尽管我很想知道这是否可以使用辅助/辅助路由来完成

    const routes: Routes = [ 
    { path: 'dashboard', 
      component: DashboardComponent,
      children : 
      [
          { path: '',  component: FooWidgetComponent, outlet: 'foo'},
          { path: '', component: BarWidgetComponent, outlet: 'bar' }
      ]    
    },
 ];

Answer 2

试试这个怎么样？

<a [routerLink]="['', { outlets: { foo: ['foo'] } }]">Contact</a>