Angular 5：当我在应用程序中有2个路由器插座时，子路由不起作用

Question

我在模块上创建了路由，并将其作为子级导入。

在一个模块中。

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

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

Answer 1

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

Answer 2

命名出口是辅助路线的目标。 如果要从浏览器导航到辅助路线，请输入以下网址

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

管理员是主要导航。 括号包围第二条路径。 次要路径由出口名称（AdminRO），冒号分隔符和次要路径路径（产品）组成。