如何将静态数据从路由配置传递到组件答案

【问题标题】：How to pass static data from route config to components如何将静态数据从路由配置传递到组件
【发布时间】：2018-06-20 11:32:05
【问题描述】：

我需要将静态数据从路由传递到组件。我尝试在路由配置中传递数据，但是当我从激活路由订阅数据时得到空数据。我在下面提供了我的代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from '../../app.component';
import { CompanyInformationComponent } from '../../components/pages/company/company-information/company-information.component';
import { CompanyDescriptionComponent } from '../../components/pages/company/company-description/company-description.component';

const routes: Routes = [
  { path:'', redirectTo: 'company-information', pathMatch: 'full', data: { title: 'Company Information' } },
  { path:'company-information', component: CompanyInformationComponent, data: { title: 'Company Information' } },
  { path:'company-description', component: CompanyDescriptionComponent, data: { title: 'Company Description' } },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [
    RouterModule
  ],
  providers: [

  ]
})
export class routingModule { }

我的标题组件

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

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'site-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor( private route:ActivatedRoute ) {

  }

  ngOnInit() {
    this.route.data.subscribe(
      data => {
        console.log('Title',data);
      }
    )
  }
}

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

您可以使用route.snapshot.data获取数据

您还应该注入Router 来监视router.events，这样构造函数就会看起来像

constructor (private router : Router, private route : ActivatedRoute) {}

在 OnInit 中

ngOnInit() {
    this.router.events
        .filter(event => event instanceof NavigationEnd)
        .subscribe(
            () => {
                console.log(this.route.snapshot.data) // should print { title: 'Company Information'}
            }
    );
}

【讨论】：

您好，感谢您的回复，尝试了此代码并收到此错误“this.router.events.filter is not a function”
您使用的是哪个版本的 Angular？您是否正确导入了Router 和ActivatedRoute？
使用 Angular 5，还注入了路由器、activatedRoute 并尝试从 rxjs 导入过滤器，但仍然得到空对象
那么似乎 HeaderComponent 内部的router.events 从未被调用过。尝试登录该事件以验证它是否被触发。如果这是真的，那么你必须在不同的地方订阅router.event。
您还试图在HeaderComponent 中获取数据，其中激活的组件是CompanyInformationComponent。这也可能是一个问题。

【解决方案2】：

您可以像这样简单地通过路由传递值：

示例：path: 'company-information/:valueToPass',

在你的组件中：

import { ActivatedRoute } from '@angular/router';

[...]

constructor( protected route: ActivatedRoute){
 this.route.params.subscribe((params) => {
      if (params.valueToPass) {
        this.localValue= params.valueToPass;
      }
    });
}

【讨论】：