angular - 将用于路由的按钮设置为“活动”以启动路由

问题描述

我有一个使用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 。

一如既往地感谢。

亚历克斯

标签： angularangular-materialangular-ui-routerangular-material2

您可以使用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 的样式。

堆栈闪电战

angular - 将用于路由的按钮设置为“活动”以启动路由

问题描述

解决方案

推荐阅读