要在路由器outler中强制设置路由参数,我们会：
this.router.navigate(['/hero',hero.id]);
如何在命名出口中强制设置路由参数？
this.router.navigate([{ outlets:{modal: 'modal/user'} }]);
现在我连接字符串以设置路由参数：
this.router.navigate([{ outlets: {modal: 'modal/user' + '/' + 'this.id'} }]);
解决方法
确保您的路由文件在我的模态组件中具有：id
{ path: 'component-aux/:id',component: ComponentAux,outlet: 'sidebar' }
你的主叫路线应该是这样的
id: string="any value you want to set"; this.id= input || 'not set';
||如果未指定任何值,将设置默认值
<a [routerLink]="[{ outlets: { 'sidebar': ['component-aux',this.id] } }]">Component Aux</a>
你的辅助组件应该是这样的
import {Component} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'component-aux',template: 'Component Aux'
})
export default class ComponentAux {
private id;
private sub: any;
constructor(private route: ActivatedRoute) {}
private ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = +params['id']; // (+) converts string 'id' to a number
console.log(this.id);
});
}
private ngOnDestroy() {
this.sub.unsubscribe();
}
}
这是live plnkr链接https://plnkr.co/edit/5aP6MgTRzXr5Urq5fr2J?p=preview.我希望这个能帮上忙 ：)
