ログイン ページでのログインに成功すると、ルートが「インバウンド」ビューに変わります。このビューには、ナビゲーション バーに「インバウンド」と「アウトバウンド」の 2 つのタブがあります。ルーターの状態を反映するために、「受信」navtab が既に選択されていることを望みます。ただし、このデモを実装した後も、デフォルトではまだ選択されていません
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
}
];