在子路由中设置named router-outlet的内容
Setting content of named router-outlet in child route
在我的应用程序中,我想在两个路由器出口中显示内容,主要出口和命名出口。如果我将两个出口都放在根级别,我可以像这样设置命名出口的内容:
this.router.navigate([{ outlets: { rootSecondary: ['rootSecondaryPath'] } }]);
但是,我希望应用程序的总体布局提供单个路由器出口,并能够在子路由中使用不同的路由器出口结构。
如果我创建一个子路由,它也有一个主要出口和一个命名出口,我无法设置次要出口的内容。报告的错误是:
Cannot match any routes.
路由定义如下:
const appRoutes: Routes = [
{ path: '', component: RootPrimaryComponent },
{ path: 'rootSecondaryPath', component: RootSecondaryComponent, outlet: 'rootSecondary' },
{
path: 'child', component: ChildComponent, children:
[
{ path: '', component: ChildPrimaryComponent },
{ path: 'childSecondaryPath', component: ChildSecondaryComponent, outlet: 'childSecondary' },
]
},
];
const appRouting = RouterModule.forRoot(appRoutes);
app.component.html 的模板包含一个主要出口和 - 用于测试目的 - 一个命名的次要出口:
<router-outlet></router-outlet>
<div style="border: solid 1px green">
<router-outlet name="rootSecondary"></router-outlet>
</div>
上面的代码是从一个按钮调用的,并毫无问题地设置了 rootSecondary 插座。
模板 child.component.html 定义了两个位于根主出口内部的出口:
<router-outlet></router-outlet>
<div style="border:solid 1px red">
<router-outlet name="childSecondary"></router-outlet>
</div>
child.primary.component.html 包含调用代码设置辅助插座的按钮:
<div>
child-primary works!
<button (click)="setChildSecondary()">Set child secondary</button>
</div>
点击后,如下代码运行:
setChildSecondary() {
this.router.navigate([{ outlets: { childSecondary: ['childSecondaryPath'] } }]);
}
我必须如何更改代码才能填充 router-outlet childSecondary?
为了解决这个问题,我需要将 relativeTo
参数设置为当前活动路由的父级:
export class ChildPrimaryComponent {
constructor(private readonly router: Router,
private readonly route: ActivatedRoute) { }
setChildSecondary() {
this.router.navigate([{ outlets: { childSecondary: ['childSecondaryPath'] } }],
{ relativeTo: this.route.parent });
}
}
在我的应用程序中,我想在两个路由器出口中显示内容,主要出口和命名出口。如果我将两个出口都放在根级别,我可以像这样设置命名出口的内容:
this.router.navigate([{ outlets: { rootSecondary: ['rootSecondaryPath'] } }]);
但是,我希望应用程序的总体布局提供单个路由器出口,并能够在子路由中使用不同的路由器出口结构。
如果我创建一个子路由,它也有一个主要出口和一个命名出口,我无法设置次要出口的内容。报告的错误是:
Cannot match any routes.
路由定义如下:
const appRoutes: Routes = [
{ path: '', component: RootPrimaryComponent },
{ path: 'rootSecondaryPath', component: RootSecondaryComponent, outlet: 'rootSecondary' },
{
path: 'child', component: ChildComponent, children:
[
{ path: '', component: ChildPrimaryComponent },
{ path: 'childSecondaryPath', component: ChildSecondaryComponent, outlet: 'childSecondary' },
]
},
];
const appRouting = RouterModule.forRoot(appRoutes);
app.component.html 的模板包含一个主要出口和 - 用于测试目的 - 一个命名的次要出口:
<router-outlet></router-outlet>
<div style="border: solid 1px green">
<router-outlet name="rootSecondary"></router-outlet>
</div>
上面的代码是从一个按钮调用的,并毫无问题地设置了 rootSecondary 插座。
模板 child.component.html 定义了两个位于根主出口内部的出口:
<router-outlet></router-outlet>
<div style="border:solid 1px red">
<router-outlet name="childSecondary"></router-outlet>
</div>
child.primary.component.html 包含调用代码设置辅助插座的按钮:
<div>
child-primary works!
<button (click)="setChildSecondary()">Set child secondary</button>
</div>
点击后,如下代码运行:
setChildSecondary() {
this.router.navigate([{ outlets: { childSecondary: ['childSecondaryPath'] } }]);
}
我必须如何更改代码才能填充 router-outlet childSecondary?
为了解决这个问题,我需要将 relativeTo
参数设置为当前活动路由的父级:
export class ChildPrimaryComponent {
constructor(private readonly router: Router,
private readonly route: ActivatedRoute) { }
setChildSecondary() {
this.router.navigate([{ outlets: { childSecondary: ['childSecondaryPath'] } }],
{ relativeTo: this.route.parent });
}
}