Angular 2动态更改标签

Question

我创建了一个工作正常的选项卡组件。 我想以编程方式支持更改标签，但是我不确定该如何处理。

这是我到目前为止的代码...

标签组件

@Component({
    selector: 'tabs',
    template: `
        <ul>
            <li *ngFor="let tab of tabsMenu" (click)="tabClick(tab)" [class.active]="tab.index === activeTabIndex">
                {{ tab.title }}
            </li>
        </ul>
        <div>
            <ng-content select="tab-content"></ng-content>
        </div>
    `
})

export class TabsComponent implements AfterViewInit {
    @Input() tabsMenu: MenuItem[];
    @Input() activeTabIndex: number = 0;

    @ContentChildren(TabContentComponent) tabsContent: QueryList<TabContentComponent>;
    private tabsContentComponents: TabContentComponent[] = [];

    ngAfterViewInit() {
        this.tabsContentComponents = this.tabsContent.toArray();
        this.setActiveTab(this.activeTabIndex);
    }

    tabClick(tab: MenuItem) {
        this.activeTabIndex = tab.index;
        this.setActiveTab(tab.index);
    }

    private setActiveTab(index: number) {
        this.tabsContentComponents.filter((temp) => {
            temp.activeTabIndex = this.activeTabIndex;
        });
    }
}

标签内容组件

@Component({
    selector: 'tab-content',
    template: `
        <div [hidden]="tabIndex !== activeTabIndex">
            <ng-content></ng-content>
        </div>
    `
})

export class TabContentComponent {
    @Input() tabIndex: number;
    activeTabIndex: number = 0;
}

使用的代码示例

@Component({
    selector: 'example',
    template: `
        <tabs [tabsMenu]="tabs">
            <tab-content>
                Tab 1
            </tab-content>
            <tab-content>
                Tab 2
            </tab-content>
            <tab-content>
                Tab 3
            </tab-content>
         </tabs>
    `
})

export class TabContentComponent {
    tabs: MenuItem[] = [
        new MenuItem(0, 'Tab 1'),
        new MenuItem(1, 'Tab 2'),
        new MenuItem(2, 'Tab 3')
    ];
}

我现在想做的是，在一个tab-content组件内有一个按钮，可以重定向到另一个标签。 我不完全确定如何更改activeTabIndex内的TabComponent以便能够访问其他选项卡。

Answer 1

通常，一个好主意是看一下来自这个惊人的有角团队的material2！ :)

https://github.com/angular/material2/tree/master/src/lib/tabs

但是特别是对于您的问题，您可以尝试执行以下操作：

<tabs #tabsRef [tabsMenu]="tabs">
   <tab-content>
       Tab 1
   </tab-content>
   <tab-content>
       Tab 2
       <button (click)="tabsRef.setActiveTab(2);">tab 3!</button>
   </tab-content>
   <tab-content>
       Tab 3
   </tab-content>
</tabs>

并将该函数setActiveTab公开。