如何在Angular 2中的命名出口中强制设置路径参数

发布时间：2020-12-17 17:32:29 所属栏目：安全来源：网络整理

导读：要在路由器outler中强制设置路由参数,我们会： this.router.navigate(['/hero',hero.id]); 如何在命名出口中强制设置路由参数？ this.router.navigate([{ outlets:{modal: 'modal/user'} }]); 现在我连接字符串以设置路由参数： this.router.navigate([{ out

要在路由器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.我希望这个能帮上忙：)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!