web-dev-qa-db-ja.com

Angular 2タブの変更を「監視」する方法

私は持っています：

<md-tab-group color="primary">
  <md-tab label="Проэкты">
    <h1>Some tab content</h1>
  </md-tab>
  <md-tab label="Обучалка">
    <h1>Some more tab content</h1>
    <p>...</p>
  </md-tab>
</md-tab-group>

特定のタブがクリックされたときにイベントをキャッチし、コンポーネント内でこの関数を呼び出す必要があります。

onLinkClick() {
  this.router.navigate(['contacts']); 
}
angularangular-material2
21
Igor Tikhonenko

(selectedTabChange)eventを使用できます。 Material2＃tabs を確認してください。

テンプレート：

<mat-tab-group color="primary" (selectedTabChange)="onLinkClick($event)">
  ...
</mat-tab-group>

コンポーネント：

import { MatTabChangeEvent } from '@angular/material';

// ...

onLinkClick(event: MatTabChangeEvent) {
  console.log('event => ', event);
  console.log('index => ', event.index);
  console.log('tab => ', event.tab);

  this.router.navigate(['contacts']); 
}
68
developer033

ngKeypress（Angular Documentation here ）を任意のHTMLタグに使用できます。例えば：

<anyHtmlTag ng-keypress="yourFunction($event)">  

yourFunction(evt){
   if(evt.code === "Tab"){
      //Do your stuff
   }
}
0
heronsanches

@Outputコンポーネントからmd-tabとしてイベントを公開する必要があります。何かのようなもの：

import { EventEmitter, Output, Input, Component } from '@angular/core';

@Component({
    selector: 'tab',
    template: `
        <button (click)="clicked()">{{ name }}</button>
    `,
    styles: [`
    `]
})
export class TabComponent {
    @Input() name = 'replaceme';
    @Output() tabClicked = new EventEmitter<null>();

    clicked() {
        this.tabClicked.emit();
    }
}

次に、md-tab-groupで次のようなイベントを消費します。

import { Component }          from '@angular/core';

@Component({
    selector: 'tab-group',
    template: `
        <!--<tab *ngFor="let tab of tabs" [name]="tab"></tab>-->
        <tab *ngFor="let tab of tabs" [name]="tab" (tabClicked)="tabChanged(tab)"></tab>
        <div>
        {{ selectedTab }}
        </div>
    `,
    styles: [`
    `]
})
export class TabGroupComponent {
    private tabs = ['foo', 'bar'];
    private selectedTab = this.tabs[0];

    onInit() {
        this.selectedTab = this.tabs[0];
    }

    tabChanged(tab) {
        this.selectedTab = tab;
    }
}

概念を示す実用的なプランカー

0
Lucas