Angular / CSS onload, как активировать вкладку по умолчанию - PullRequest
Новая
       49

Angular / CSS onload, как активировать вкладку по умолчанию

1 голос
/ 26 апреля 2020

Я создаю angular страницу, которая использует 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 { }

Я могу получить страница, как я хочу, кроме одной вещи. Когда страница загружается, она показывает страницу по умолчанию, но вкладка не отображается как выбранная. Когда я нажимаю на вкладку, она становится активной и показывает ту же страницу. Поэтому хотелось бы узнать, как выполнить требование.

1 Ответ

1 голос
/ 26 апреля 2020

Вы можете использовать атрибут routerLinkActive для того же самого. Где этот атрибут добавляет имя класса к активному элементу, а затем вы можете добавить CSS к этому классу

Найти синтаксис: 

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

Css: 

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