Angular2 - 使用路由器导出名称时路由不起作用

Question

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

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

路由模块

@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 一个名字以实现一些自定义，但它不起作用。

如果我应用此更改:

 <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 : 应用程序已加载但没有注入(inject)任何组件

/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 {
}

并绑定(bind)到以下路由配置(请注意，这是为了解释正在发生的事情)。

@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'
      }
    ]
  }
])

请注意，上面的配置绑定(bind)了用 path: '' 表示的基本路径到基地导出。 另一方面路径dashboard1和 dashboard2与另一个 socket 相连，名为 socket one .

由于基本路径绑定(bind)到基本导出，因此配置的重定向，即重定向到dashboard1 , 尝试在底座 socket 上。因为，使用上面的配置，没有 dashboard1配置了基本 socket ，重定向失败并显示错误，指出该 url 不存在 socket (这是正确的行为)。

简而言之，您不能使用上述配置从一个路由器导出重定向到另一个路由器导出，因为简单地说，在重定向中没有任何内容指定它应该呈现到不同的导出。这也是删除 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' ] } ]);
    }
}

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

Here's a working plunker演示上述行为，并路由到辅助路由。