时间戳

首页 > 解决方案 > 如何在 Angular 中访问 Route 的数据属性？

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

问题描述

我有以下代码：

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？

标签： angular

解决方案

an 上的 data 属性ActivatedRoute是 an 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

推荐阅读