Передача данных через выражение шаблона углового маршрутизатора routerLink?

Question

Играя с начальной точкой стекаблица, и я добавил следующую маршрутизацию:

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


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

Также добавили <router-outlet> к шаблону app-component.html, и hello-component отображается при ссылке нижепри нажатии на ссылку:

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

Однако свойство компонента hello-component при щелчке ссылки пустое:

@Input() name: string;

Есть ли способ передать значение через шаблонВыражение такое, что свойство name установлено в компоненте и вычисляется в шаблонной строке 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 здесь , если вы хотите посмотреть