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

一般来说，一个好主意是从那个神奇的角度团队中看看材料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公开。

Angular 2动态更改标签

1 个答案: