在我的应用程序中,我没有一个菜单栏,当用户导航时,我需要被绘制,我还有另外一个组件也需要绘制。我能用routerLinkActive实现这一点吗?
menu.html
<menu>
<a routerLink="page1" routerLinkActive="active">
option1
</a>
<a routerLink="page2" routerLinkActive="active">
option2
</a>
</menu>这个菜单很好用。但我要问的是,如何利用放置在其他HTML标记中的routerLinkActive属性。像这样:
main.html
<main>
<span class="title" routerLinkActive="active">My sub child part</span>
</main>发布于 2017-06-05 19:59:14
可以将routerLinkActive指令的状态绑定到是否将类应用于元素,如下所示:
<a routerLink="page1" routerLinkActive="active" #rla="routerLinkActive"/>
<span [class.active-span]="rla.isActive"></span>
.active-span {
background-color: red;
}#rla是一个模板变量,您可以在医生们中找到更多关于RouterLinkActive指令的用例的信息。
发布于 2017-06-05 19:58:02
可以将RouterLinkActive指令应用于RouterLink的祖先。
<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
<a routerLink="/user/jim">Jim</a>
<a routerLink="/user/bob">Bob</a>
</div>更多细节这里。
希望这能帮上忙!
发布于 2020-01-27 07:46:47
您可以在父选择器上调用[class.active]="router.isActive('/parentUrlFragment',false)"以在父选择器上具有活动类。
在TS文件上:
import { Router, ActivatedRoute } from '@angular/router';
constructor(public router: Router){}现在您可以在html中访问路由器的isActive方法;
因此,如果您有一个嵌套菜单,如:
Product
> Category 1
> Category 2使用[class.active]="router.isActive('/product',false)"在产品选择器上选择任何类别链接都将具有活动类
https://stackoverflow.com/questions/44376598
复制相似问题