Angular / CSS onload如何使默认选项卡处于活动状态[重复]

Question

我正在创建一个角度页面，它使用 mat-tab-nav-bar 和 mat-tab-link强>。

dashborad.component.html

<div><nav mat-tab-nav-bar>
    <a mat-tab-link [routerLink]="['/home']">Home</a>
    <a mat-tab-link [routerLink]="['/admin']">Admin</a>
    <a mat-tab-link [routerLink]="['/order']">Orders</a>
    </nav></div>
  <div><router-outlet></router-outlet></div>

AppRoutingModule

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { HomeComponent} from './components/home/home.component';
import { AdminComponent} from './components/admin/admin.component';
import { OrdersComponent} from './components/orders/orders.component';


const routes: Routes = [
  {path: 'dashboard', component: DashboardComponent ,
children: [
     {path: 'home', component: HomeComponent},
    {path: 'admin', component: AdminComponent},
    {path: 'order', component: OrdersComponent},
    {path: '', redirectTo: 'home', pathMatch: 'full'}
]
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

除了一件事之外，我可以随心所欲地获取页面。加载页面时，它显示默认页面，但选项卡未显示为选中状态。当我单击一个选项卡时，它会变为活动状态并显示相同的页面。所以想知道如何实现要求。

Answer 1

您也可以使用 routerLinkActive 属性。该属性将类名添加到活动元素的位置，然后您可以将 CSS 添加到该类

查找语法：

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

CSS：

.active-link
{
Color: Blue;
Font-size: 17;
}