css - 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>

应用路由模块

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 { }

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

标签： cssangularnavmat-tab

Answer 1

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

查找语法：

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

CSS：

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