Angular2 - 使用路由器插座名称时路由不起作用

Question

我正在尝试为路由器插座命名，但它不起作用。

这是完美运行的基本路由：

路由模块

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'admin',
        component: AdminComponent,
        children: [
          {
            path: '',
            redirectTo: 'dashboard1',
            pathMatch: 'full'
          },
          {
            path: 'dashboard1',
            component: AdminDashboard1Component
          },
          {
            path: 'dashboard2',
            component: AdminDashboard2Component
          }
        ]
      }
    ])
  ],
  exports: [
    RouterModule
  ]
})
export class AdminRoutingModule { }

组件 html

<div class="wrapper">

  <app-admin-header></app-admin-header>
  <!-- Left side column. contains the logo and sidebar -->
  <app-admin-left-side></app-admin-left-side>

  <!-- Content Wrapper. Contains page content -->
  <router-outlet></router-outlet>

  <!-- /.content-wrapper -->
  <app-admin-footer></app-admin-footer>

  <!-- Control Sidebar -->
  <app-admin-control-sidebar></app-admin-control-sidebar>
  <!-- /.control-sidebar -->
</div>

现在我想为路由器插座命名以实现一些自定义，但它不起作用。

如果我应用此更改：

 <router-outlet name='one'></router-outlet>

和：

imports: [
    RouterModule.forChild([
      {
        path: 'admin',
        component: AdminComponent,
        children: [
          {
            path: '',
            redirectTo: 'dashboard1',
            pathMatch: 'full'
          },
          {
            path: 'dashboard1',
            component: AdminDashboard1Component,
            outlet:'one'
          },
          {
            path: 'dashboard2',
            component: AdminDashboard2Component
            outlet:'one'
          }
        ]
      }
    ])
  ]

路由不起作用：

/admin : 应用程序已加载但没有注入任何组件

/admin/dashboard1 ：未加载应用程序，我在控制台中收到此错误：错误：无法匹配任何路由。URL 段：'admin/dashboard1'

感谢支持

Answer 1

问题在于您尝试访问页面的方式。

让我们从您的路由配置开始。

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'admin',
        component: AdminComponent,
        children: [
          {
            path: '',
            redirectTo: 'dashboard1',
            pathMatch: 'full'
          },
          {
            path: 'dashboard1',
            component: AdminDashboard1Component,
            outlet:'one'
          },
          {
            path: 'dashboard2',
            component: AdminDashboard2Component,
            outlet:'one'
          }
        ]
      }
    ])
 ],it attempts to perform a 
  exports: [
    RouterModule
  ]
})
export class AdminRoutingModule { }

从表面上看，配置似乎是正确的，但是，它不适合您想要的使用方式。

当AdminRoutingModule延迟加载时，路径admin会<router-outlet></router-outlet>在某个父组件中找到的上下文中呈现，在本示例中，我们将BaseComponent其称为其内容为

@Component({ template: '<router-outlet></router-outlet'})
export class BaseComponent {
}

并与以下路由配置相关联（请注意，这是为了解释正在发生的事情）。

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path:'', component:BaseComponent,
        children: [
          { path:'a', loadChildren:'some-path/admin-routing.module#AdminRoutingModule // This will be loaded in the router-outlet found within the BaseComponent
        ]
      }
    ]), ...
 ],
 declerations: [...]
 bootstrap: [...]
})
export class AppModule { }

...回到你的路由配置

RouterModule.forChild([
  {
    path: 'admin',
    component: AdminComponent,
    children: [
      {
        path: '', // Tied with the main router-outlet
        redirectTo: 'dashboard1',
        pathMatch: 'full'
      },
      {
        path: 'dashboard1', // Tied with a named outlet
        component: AdminDashboard1Component,
        outlet:'one'
      },
      {
        path: 'dashboard2', // Tied with a named outlet
        component: AdminDashboard2Component,
        outlet:'one'
      }
    ]
  }
])

请注意，上述配置将表示的基本路径与path: '' 基本出口联系起来。另一方面，路径dashboard1和dashboard2被绑定到另一个出口，即出口one。

由于基本路径与基本出口相关联，因此在基本出口dashboard1上尝试配置的重定向，即重定向到。由于使用上述配置，没有dashboard1使用基本出口配置，重定向失败，错误指定该 url 不存在出口（这是正确的行为）。

简而言之，您不能使用上述配置从一个路由器出口重定向到另一个出口，因为简单地说，在重定向中没有任何内容指定它应该呈现到不同的出口。这也是为什么outlet:'one'从您的配置中删除会起作用的原因，因为重定向将发生在同一个插座树中。

解决方案

您不能像您提到的那样执行重定向。但是，有一些解决方案可以实现您想要的。

在您的AdminComponent两个网点都存在，如下所示

<!-- Content Wrapper. Contains page content -->
<router-outlet></router-outlet>
<router-outlet name="one"></router-outlet>

向您的基本路径添加一个组件，该组件在初始化时执行您需要的导航，如下所示...

在您的路由配置中

{
    path: '', component: MyBaseAdminComponent
},

在你的 MyBaseAdminComponent

@Component({ template: '' })
export class MyBaseAdminComponent implements OnInit {
    constructor(private router:Router;) {}

    ngOnInit() {
       this.router.navigate([ { outlet: { one: [ 'dashboard1' ] } ]);
    }
}

以上应该为您提供所需的解决方案。

这是一个工作 plunker来演示上述行为，并路由到辅助路由。