角度 2 如何"watch"选项卡更改

Question

我有：

<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']); 
}

Answer 1

您可以使用

(selectedTabChange)事件。检查材料2#选项卡。

模板：

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

组件：

import { MatTabChangeEvent } from '@angular/material';
// ...
onLinkClick(event: MatTabChangeEvent) {
  console.log({ event });
  this.router.navigate(['contacts']); 
}

Answer 2

您需要

将事件发布为组件md-tab @Output。 像这样：

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;
    }
}

这是一个演示概念的工作 plunker

Answer 3

可以

按如下方式轻松完成

 <md-tab-group color="primary" (click)="selectedTabIndex=tabRef.selectedIndex" #tabRef>
      <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>

唯一要做的就是在组件中定义一个全局变量。

 export class MyComponent implements OnInit{   
 selectedTabIndex=0;
     ngOnInit(){
         // 
       }
    }

Answer 4

文档说，在激活选项卡之前，u选项卡的内容不会注入到DOM中。因此，您可以使用@HostListener注释捕获组件上的 DOM 事件：

<md-tab-group color="primary">
  <md-tab label="Проэкты">
    <my-cool-tab1></my-cool-tab1>
  </md-tab>
  ...
</md-tab-group>

元件：

@Component({selector: 'my-cool-tab1', ...})
export class MyCoolTab1Component {
  @HostListener('DOMNodeInsertedIntoDocument')
  foo() {
    console.log('Tab activated');
  }
  @HostListener('DOMNodeRemovedFromDocument')
  foo2() {
    console.log('Tab deactivated');
  }
}

更新：这在FF %(

Answer 5