将用于路由的按钮设置为 'active' 以启动路由

Question

我有一个使用 angular/material 的新项目。我正在尝试使用按钮设置 toolbar/nav。我需要将起始活动路线的按钮设置为 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。

一如既往的感谢。

亚历克斯

Answer 1

您可以使用 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 class active-link

.active-link {
  background-color: white;
  opacity: 1;
}

如果您想要白色，则必须将不透明度设置为 1，因为您的 mat-tab-link 属性应用了不透明度为 0.6 的样式。

Stackblitz

将用于路由的按钮设置为 'active' 以启动路由

Set a button used for routing to 'active' for starting route

angular-ui-router

angular-material

angular-material2

angular