2

在登录页面成功登录后,路由更改为“入站”视图,导航栏中有两个选项卡,“入站”和“出站”。我希望已经选择了“入站”导航选项卡以反映路由器的状态。但是,在实现了这个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
    }
];
4

0 回答 0