路由模块

Question

我试图给路由器插座命名，但它无法正常工作。

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

路由模块

nitrat.all$month <- as.numeric(format(nitrat.all$date, format = "%m"))
library("dplyr")
nitrat_to_plot <- filter(nitrat.all, ((month >= n_month1) & (month <= n_month2)))

组件html

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

现在我想给路由器插座命名，以便实现一些自定义设置，但它确实无法正常工作。

如果我应用此更改：

<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>

路由不起作用：

/ admin：应用程序已加载但未注入任何组件

/ admin / dashboard1：未加载应用程序，我在控制台中收到此错误：错误：无法匹配任何路由。网址细分：＆＃39; admin / dashboard1＆＃39;

感谢支持

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与另一个分机相关联，名为outlet 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' ] } ]);
    }
}

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

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

Angular2 - 使用路由器插座名称时路由无法正常工作

路由模块

组件html

1 个答案: