在登录页面成功登录后,路由更改为“入站”视图,导航栏中有两个选项卡,“入站”和“出站”。我希望已经选择了“入站”导航选项卡以反映路由器的状态。但是,在实现了这个demo之后,它仍然默认没有被选中
html:
<nav md-tab-nav-bar *ngIf="!router.url.includes('login')">
<a md-tab-link
*ngFor="let tabLink of tabLinks; let i = index"
[routerLink]="tabLink.link"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{tabLink.label}}
</a>
</nav>
零件:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { MdTab, MdTabLink } from '@angular/material';
@Component({
selector: 'header',
templateUrl: './header.component.html',
styleUrls: [ './header.component.css' ]
})
export class HeaderComponent {
tabLinks = [
{ label: 'Inbound', link: 'inbound' },
{ label: 'Outbound', link: 'outbound' }
];
constructor( private router: Router ) { }
}
路线:
const appRoutes: Routes = [
{
path: '',
redirectTo: '/inbound',
pathMatch: 'full'
},
{
path: 'inbound',
component: InboundMessagesComponent,
canActivate: [ RouteGuard ]
},
{
path: 'outbound',
component: OutboundMessagesComponent,
canActivate: [ RouteGuard ]
},
{
path: 'login',
component: LoginComponent
}
];