如何限制路由器出口仅使用该组件填充页面的特定部分

Question

我使用的是Angular 13和PrimeNG 13。我有一个基本组件(ContentComponent(，我想在其中单击菜单中的一个项目，并在主要内容区域中查看相应的组件。。。

<div>
<div class="sidePanel">
<div class="menu">           
<p-panelMenu  [model]="items" [multiple]="false"></p-panelMenu> 
</div>
<div class="main">             
<router-outlet></router-outlet>
</div>
</div>
</div>

我已经定义了这些PrimeNG菜单项。。。

ngOnInit() {
this.items1 = [{
label: 'Users',
items: [
{
label: 'Reports',
id: 'reports',
routerLink: ['reports']
}
...
}

我已经在我的app-routing.module.ts文件中设置了这个

const routes: Routes = [
...
{
path: 'content',
children: [
{
path: '',
component: ContentComponent
},
{
path: 'reports',
component: ReportsComponent
},

但是当我的具有面板菜单的页面被呈现并且我点击"；报告；项目；ReportsComponent"占据整个屏幕并导致导航面板消失。如何限制路由器出口仅填充页面指定部分中的组件？

Answer 1

由于ReportsComponent应根据路由更改在ContentComponent内呈现，因此您可以按如下方式更改应用程序的路由：

const routes: Routes = [
...
{
path: 'content',
// The parent component should be added here:
component: ContentComponent
children: [
// The children's components should be added here:
{
path: 'reports',
component: ReportsComponent
},

点击此处阅读更多关于Angular中嵌套路线的信息：https://angular.io/guide/router#nesting-路由