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

Question

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

在模块中。路由.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);

现在，当它成功重定向到第一个主页组件时。 但是当我尝试URL本地主机/管理员/产品时。

它给了我一个错误

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

Answer 1

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

Answer 2

命名的网点是辅助路由的目标。如果要从浏览器导航到辅助路由，请按如下方式输入网址

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

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