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

Answer 1

总的来说，一个好主意是看看那个令人惊叹的 angular-team 中的 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 public.

Angular 2 动态更改标签

Angular 2 changing tabs dynamically

angular2-components

angular