通过 routerLink angular 路由器模板表达式传递数据？

Question

玩弄 stackblitz 起点，我添加了以下路由：

    const routes : Routes = [ {path: 'hello', 'component': HelloComponent}];


    @NgModule({
      imports:      [ 
        RouterModule.forRoot(routes, {enableTracing: true}) ],
      declarations: [ AppComponent, HelloComponent ],
    })

还在app-component.html模板中添加了一个<router-outlet>，单击下面的link时会呈现hello-component：

<a routerLink="hello" routerLinkActive="active">hello</a>

然而，单击 link 时，hello-component 组件上的属性为空：

@Input() name: string;

有没有一种方法可以通过模板表达式传递一个值，以便在组件上设置名称属性并在 hello-component.ts 的模板字符串中使用 hello 锚被点击？

仅供参考，hello 组件如下所示：

    import { Component, Input } from '@angular/core';

    @Component({
      selector: 'hello',
      template: `<h1>Hello {{name}}!</h1>`,
      styles: [`h1 { font-family: Lato; }`]
    })
    export class HelloComponent  {
      @Input() name: string;
    }

似乎必须检查一个 ActivatedRoute 实例才能使属性起作用？

Answer 1

首先，修改您的路由定义以允许路径参数，如下所示：

const routes : Routes = [ 
  {path: 'crisis-center', 'component': HelloComponent}, 
  {path: 'hello/:name', 'component': HelloComponent}, 
  {path: '**', 'component': HelloComponent}
];

这将允许您将 name 参数传递给 /hello 路由。

要在组件中访问它，您需要订阅参数更改，如下所示：

export class HelloComponent  {
  @Input() name: string;

  constructor(private route: ActivatedRoute) {

  }

  ngOnInit(){
    this.route.paramMap.subscribe( params =>
        this.name = params.get('name')
    )
  }
}

最后，您可以通过 routerLink 传递一个值，如下所示：

<a [routerLink]="['hello', routeOneName]" routerLinkActive="active">hello</a>

其中 routeOneName 是在 AppComponent 中声明的变量。

我已经为你的 StackBlitz 创建了一个分支 here 如果你想看看

通过 routerLink angular 路由器模板表达式传递数据？

Passing data via a routerLink angular router template expression?

html

javascript

angular

angular-router