如何在Angular中访问Route的数据属性？

Question

我有以下代码：

https://stackblitz.com/github/NickHodges/datademo

我正在尝试在页面上显示路径的数据。

从代码中可以看出，我已经声明了路径信息，如下所示：

const routes: Routes = [
  {
    path: 'comp1',
    component: Comp1Component,
    data: { info: 'Data from Comp1' }
  },
  {
    path: 'comp2',
    component: Comp2Component,
    data: { info: 'Data from Comp2' }
  }
];

我已声明了这样的组件：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-comp1',
  templateUrl: './comp1.component.html',
  styles: []
})
export class Comp1Component implements OnInit {
  constructor(public route: ActivatedRoute) {}

  ngOnInit() {}
}

我试图访问data属性，如下所示：

<p>
  comp1 works!
</p>
<p>Comp1Data: {{ route.data['info'] }}</p>

所以我去了/comp1路线，但没有显示数据。

如何在data上显示Route属性？

Answer 1

ActivatedRoute上的数据属性是Observable，您需要订阅它。

comp-1.component.ts

export class Comp1Component implements OnInit {

  public data;   

  constructor(public route: ActivatedRoute) {}

  ngOnInit() {
    this.route.data.subscribe(data => this.data = data);
  }

}

comp1-component.html

<p *ngIf="data">Comp1Data: {{ data.info }}</p>

https://angular.io/api/router/ActivatedRoute#data

https://stackblitz.com/edit/github-4p1j6c