Angular使用另一个路由器出口

Question

我为我的项目创建了主要路由，我有仪表板组件，如下所示仪表板

我需要为这个仪表板组件使用另一个路由系统。我有20%的屏幕显示侧边栏另外80%显示内容所以我需要每个侧边栏链接用另一个组件替换内容就像router-outlet

的代码

<section>
<div class="sidebar">
<a class="sidelink d-block p-3 second-font active">Products</a>
<a class="sidelink d-block p-3 second-font">Brands</a>
<a class="sidelink d-block p-3 second-font">Subscribtions</a>
<a class="sidelink d-block p-3 second-font">Add User</a>
</div>
<div class="content">
<!-- THE PLACE WHERE I NEED TO USE ROUTING SYSTEM -->
</div>

Answer 1

EDIT:加载子组件

你走在正确的道路上，现在你需要做什么，如果还没有做。在app-routing.module.ts中添加路径并将其链接到你的组件。像下图:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddUserComponent } from './components/add-user/add-user.component';
import { BrandsComponent } from './components/brands/brands.component';
import { ProductsComponent } from './components/products/products.component';
import { SubscriptionsComponent } from './components/subscriptions/subscriptions.component';
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{ path: 'products', component: ProductsComponent },
{ path: 'brands', component: BrandsComponent },
{ path: 'subscriptions', component: SubscriptionsComponent },
{ path: 'add-user', component: AddUserComponent },
],
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}

然后在你的组件模板中，你只需要添加routerlink让你可以使用在中定义的路径。app-routing.module.ts

. 最后router-outlet当你点击一个链接时，它会使你转到正确的组件

<section>
<div class="sidebar">
<a class="sidelink d-block p-3 second-font" routerLink="/parent/products">Products</a>
<a class="sidelink d-block p-3 second-font" routerLink="/parent/brands">Brands</a>
<a class="sidelink d-block p-3 second-font" routerLink="/parent/subscriptions">Subscriptions</a>
<a class="sidelink d-block p-3 second-font" routerLink="/parent/add-user">Add User</a>
</div>

<div class="content">
<router-outlet></router-outlet>
</div>
</section>

此外，如果你需要在活动链路上添加一个类，你应该查看routerLinkActive在角