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

这包含在app模块中 - 其路由具有根级别路由。我的期望是/仪表板路径应显示主要DashboardComponent并显示为FooComponent和BarComponent的辅助命名出口但是/仪表板路径仅显示H1标签可见

我试图在plunker中重现这个但它不起作用 http://plnkr.co/edit/6oSeZDNn6BxIyaDM6uKz?p=preview

如果您知道如何让指定的二级网点工作，请让我知道，或者甚至让吸引人的工作。： - ）

谢谢！阿南德

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>

如何在Angular中配置辅助路由

2 个答案: