角度 2 - 从活动组件获取信息

Question

我有一个带有标题和正文的页面。标题有一个帮助按钮，应该打开文档。文档链接由 help-id 参数化，这取决于当前显示的页面。

我需要根据路由器当前显示的组件更新标题中的 help-id。换句话说，从当前活动的组件中获取这个参数（这是一个简单的字符串）的正确方法是什么？

我已经看到使用服务完成通信，但是为这样一个简单的任务创建服务似乎有点过头了。

我试图从 Router 和 ActivatedRoute 代码中推断出一些东西，但我无法让任何东西正常工作。导航事件不包含对组件的任何引用，应用加载时routerState.root.firstChild 为空。

编辑：

这里，在AppComponent 我需要当前的help-id

export class AppComponent {
  private helpId;
}

我在 router-outlet 中显示的组件具有此属性，例如

export class HeroComponent {
  const helpId = 'hero';
}

export class HeroDetailsComponent {
  const helpId = 'hero-details';
}

每个组件都有定义的路由，例如

const heroesRoutes: Routes = [
  { path: 'heroes',  component: HeroComponent },
  { path: 'hero/:id', component: HeroDetailsComponent }
];

我需要当前显示的组件（由路由器渲染）的 help-id 以使标题中的帮助链接保持最新。 help-id 没有在路由参数中传递。

Answer 1

确实可以使用 ActivatedRoute 来完成。

你需要将它注入到你的组件中：

contructor(private route: ActivatedRoute) {} 

然后您需要收听路由更改事件，例如：

ngOnInit() {
    this.route.params.subscribe(params => {
        // route info is stored in `params`
        console.log(params);
    });
}