Angular 4检测来自子OnInit的路线？答案

【问题标题】：Angular 4 Detecting route from child OnInit?Angular 4检测来自子OnInit的路线？
【发布时间】：2017-05-08 17:09:57
【问题描述】：

我正在使用 Angular 4 框架构建一个网站，其中有许多不同的组件都相互交互。每个页面上都可见的一个组件是导航栏组件。导航栏上的每个项目都代表一个带有子组件的角度模块。

我的目标是突出显示导航栏上与您当前所在的模块相对应的项目。有没有办法在 Angular 模块中执行某种 OnInit，以便当该模块中的组件成为路由器时-outlet，模块本身可以告诉导航栏要突出显示哪个项目？或者有没有更好的方法来做到这一点？

我的想法是，我希望避免模块中的每个组件在其 OnInit 方法中进行调用，如果我可以在父模块中只编写一次相同的代码。

【问题讨论】：

你检查过angular.io/docs/ts/latest/api/router/index/…吗？
这适用于该模块中的一条路线，但如果用户导航到同一模块中的另一条路线怎么办？
用户导航到同一模块中的不同路线？这些行在这种情况下意味着什么，因为它仍然会更新路由器链接活动

标签： javascript angular module

【解决方案1】：

我不认为这是最好的方法，但我以前使用过这种方法，它对我很有效。在导航栏组件中，注入路由器，以便检测当前 URL 是什么。

 constructor(private router: Router){}

然后在您的导航栏组件 HTML 中，您可以使用 ngClass 让导航栏组件基于路由器状态。

  <a routerLink="/notifications" routerLinkActive="active"><span
                    class=" glyphicon glyphicon-time"
                    [ngClass]="{'active-route': router.url === '/notifications'}"></span></a>

然后在你的 CSS 中添加规则来改变活动路由的样式：

.active-route { color:red // or whatever}

【讨论】：