角度 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组件中有一个按钮，该按钮重定向到另一个选项卡。我不完全确定如何更改TabComponent内的activeTabIndex以便能够访问不同的选项卡。

Answer 1

一般来说，

一个好主意是看看那个惊人的角度团队的材料2！ :)

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公开。