Angular 5:当我在应用程序中有2个路由器插座时,子路由无效

时间:2018-06-01 10:31:31

标签: angular angular5 angular2-routing angular-router router-outlet

我已经在我的模块上创建路线并将其作为孩子导入。

在module.Routing.ts

export  const routes: Routes = [
  {
    path : 'admin',
    component : IndexComponent,
    children :[
        { path: '', component: HomeComponent, outlet:'AdminRO' },
        { path: 'products', component: ProductsComponent, outlet: 'AdminRO' }
    ]
  }
];

export  const routing: ModuleWithProviders = RouterModule.forChild(routes);

IN app.routing.ts

我有这个

const appRoutes: Routes = [
  { path: '', redirectTo: '/admin', pathMatch: 'full' },
  { path: 'login', component: AppLoginComponent }
];
export  const AppRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

现在成功重定向到第一个homecomponent。但是当我尝试url localhost / admin / products。

它给我一个错误

 Cannot match any routes. URL Segment: 'admin/products'

2 个答案:

答案 0 :(得分:2)

您需要从辅助模块中使用的路由器插座中删除AdminRO。

答案 1 :(得分:0)

指定商店是次要路线的目标。如果您想从浏览器导航到辅助路线,请输入以下网址

http://.../admin(AdminRO:products)

管理员是主要导航。 括号围绕次要路线。 辅助路由包括插座名称(AdminRO),冒号分隔符和辅助路径路径(产品)。