Angular/CSS onload 如何激活默认选项卡

Question

我正在创建一个使用 mat-tab-nav-bar 和的 angular 页面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 { }

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

Answer 1

您可以使用 routerLinkActive 属性。此属性将 class 名称添加到活动元素，然后您可以将 CSS 添加到该 class

查找语法：

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

Css:

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

Angular/CSS onload 如何激活默认选项卡

Angular/CSS onload how to get the default tab active

css

nav

angular

mat-tab