Question

我有一个app.component.ts组件，该模板包含多个标签组件，每个组件包含一个特定的链接：

app.component.html：

<h1>Tabs container</h1>
<div>
    <nav>
        <tab *ngFor="let tab of tabList" [name]="tab.name" [link]="tab.link" (eventEmitter)="closeTabEvent($event)"></tab>
    </nav>    
</div>
<div>
    <router-outlet></router-outlet>
</div>

选项卡组件的HTML模板是tab.component.html：

<a [routerLink]='link'  routerLinkActive="router-link-active">{{name}}</a>
<button *ngIf="tabIndex > 0" (click)="closeTab('tabToCloseKey')">Close tab</button>

我正在寻找一种在我的TabComponent类中获取布尔值的方法，指出哪条路线是活动的。

这是我的TabComponent类：

export class TabComponent implements OnInit {
    @Input() name: string;
    @Input() link: string;
    @Input() param: string;
    targetArray: Array<any>;
    @Output() eventEmitter = new EventEmitter<[number, boolean]>();
    // @Output() isActiveEmitter = new EventEmitter<boolean>();
    static lastTabIndex: number = 0;
    tabIndex: number = 0;
    isActive: boolean = true;
    // @ViewChild('routerLinkActive') a;
    // el: HTMLElement;
    // className: string;

    constructor(private router: Router, private sharedService: SharedService, private _elRef: ElementRef) {}

    ngOnInit() {
        // this.className = this._elRef.nativeElement.find('a').className;
        // this.className = this.el.className;
        this.tabIndex = TabComponent.lastTabIndex;
        // console.log(this.className);
        TabComponent.lastTabIndex++;        
    }

    closeTab(){
        console.log('tab closed at index: ' + this.tabIndex);
        let tuple: [number, boolean];
        tuple = [this.tabIndex, this.isActive];
        this.eventEmitter.emit(tuple);
        this.hideTabComponent();
    }

    hideTabComponent(){
        console.log('Hiding component');
    }
}

我会在此typescript类的isActive boolean属性中存储指示对应于该选项卡的路由是否处于活动状态的信息。

Answer 1

您可以在标签链接中的routerLink中使用route param，以便您可以使用Angular doc:

中提到的ActivatedRoute类中捕获该值

获取布尔值，指示哪条路线处于活动状态[Angular 2]

1 个答案: