Question

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

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

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

Answer 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}

Angular 4从儿童OnInit检测路线？

1 个答案: