角度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

一般的に1つの良いアイデアは、そのすばらしいチームです。 :)

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公開します。