2

ログイン ページでのログインに成功すると、ルートが「インバウンド」ビューに変わります。このビューには、ナビゲーション バーに「インバウンド」と「アウトバウンド」の 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
    }
];
4

0 に答える 0