如何在Angular 2中的命名出口中强制设置路线参数 [英] How to Set Route params imperatively in named outlets in Angular 2
本文介绍了如何在Angular 2中的命名出口中强制设置路线参数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
要在router-outler
中强制设置路由参数,请执行以下操作:
To set imperatively a route param in a router-outler
we do:
this.router.navigate(['/hero', hero.id]);
如何在命名网点强制设置路由参数?
How do I imperatively set a route parameter in named outlets ?
this.router.navigate([{ outlets:{modal: 'modal/user'} }]);
现在,我将字符串连接起来以设置路由参数:
Right now I concatenate string to set a route param:
this.router.navigate([{ outlets: {modal: 'modal/user' + '/' + 'this.id'} }]);
推荐答案
请确保您的路由文件在模态组件中具有:id,例如在我的
make sure your routing file have :id in modal component like this in mine
{ path: 'component-aux/:id', component: ComponentAux, outlet: 'sidebar' }
,您的呼叫路线应为
id: string="any value you want to set";
this.id= input || 'not set';
||如果未指定任何值,将设置默认值
|| will set default value if no value is specified
<a [routerLink]="[{ outlets: { 'sidebar': ['component-aux', this.id] } }]">Component Aux</a>
和您的aux组件应该像这样
and your aux component should be like this
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();
}
}
这是实时plnkr链接 https://plnkr.co/edit/5aP6MgTRzXr5Urq5fr2J?p=预览.我希望这会有所帮助:)
here is the live plnkr link https://plnkr.co/edit/5aP6MgTRzXr5Urq5fr2J?p=preview . i hope this will help :)
这篇关于如何在Angular 2中的命名出口中强制设置路线参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文