如何解决将用于路由的按钮设置为“活动”以启动路由
我有一个使用 angular/material
的新项目。我正在尝试使用按钮设置工具栏/导航。我需要将起始活动路线的按钮设置为 active with focus
。
路由是从路由模块动态生成的。路由条目如下所示:
{
path: "route-two",component: RouteTwoComponent,data: {
isTab: true,tabName: "This is the Second one",tabHint: "This is a hint"
}
}
default/starting
路由设置如下:
{
path: "",redirectTo: StartTab,pathMatch: "full",data: { isTab: false }
},{ path: "**",redirectTo: "",data: { isTab: false } }
StartTab
从一组项目常量导入:
import { StartTab } from "../constants";
以下是启动时的样子:
有什么建议吗?
参见 Stackblitz here。
一如既往的感谢。
亚历克斯
解决方法
您可以使用 routerLinkActive 属性来设置活动样式。
<button
mat-tab-link
*ngFor="let tabItem of knownRoutes"
mat-raised-button
[routerLink]="[tabItem.path]"
routerLinkActive="active-link"
[matTooltip]="tabItem.data.tabHint"
>
{{tabItem.data.tabName}}
</button>
和 css 类 active-link
.active-link {
background-color: white;
opacity: 1;
}
如果您想要白色,则必须将不透明度设置为 1,因为您的 mat-tab-link 属性应用了不透明度为 0.6 的样式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。