Как написать событие клика для вкладки в angular 8

Question

Пытался написать событие клика для вкладок, но не работает. Как его написать? Если я щелкаю по вкладке, я хочу вызвать одну функцию. Так Как установить выбранное событие щелчка мышью для компонента вкладки. Если кто-нибудь знает, пожалуйста, помогите найти решение.

app.component. html:

  <my-tabs>
  <my-tab [tabTitle]="'Tab 1'" (selectedtabclick)="test($event)">
    Tab 1 content
  </my-tab>
  <my-tab tabTitle="Tab 2" (selectedtabclick)="test($event)">
    Tab 2 content
  </my-tab>
  </my-tabs>

Демо: https://stackblitz.com/edit/angular-tabs-example-j9ot7z?file=app / app.component. html

Answer 1

Вам потребуется испустить EventEmitter в компоненте Tab или Tab. Кажется, проще всего это сделать из компонента Tabs, плюс вам не нужно дублировать разметку. Ниже вы найдете пример (часть вашего кода была опущена) и блик стека.

App.component. html

<my-tabs (selectedTabClick)="test($event)"> <! –– This is your Angular event. ––>
  <my-tab [tabTitle]="'Tab 1'" >
    Tab 1 content
  </my-tab>
  <my-tab tabTitle="Tab 2">
    Tab 2 content
  </my-tab>
</my-tabs>

// app.component.ts
...
selectedTabClick($event) {
  console.log($event.tab.elRef);
}

Tabs.component.ts

@Component({
  selector: 'my-tabs',
  template: `
    <ul class="nav nav-tabs">
      <li *ngFor="let tab of tabs" (click)="selectTab(tab)"></li>
    </ul>
    <ng-content></ng-content>
  `
})
export class TabsComponent implements AfterContentInit {
  @Output() selectedTabClick = new EventEmitter();

  selectTab(tab: Tab){
    ...

    // emit event to fire "callback" in the app.component.html
    this.selectedTabClick.emit({tab});
  }
}

Tab.component.ts

export class TabComponent {

  // Inject the elRef and the constructor and assign it as a public property
  constructor(public elRef: ElementRef){
  }
}

Вот (обновленный) стек стека с рабочим примером: https://stackblitz.com/edit/angular-tabs-example-uavrd8?file=app%2Ftabs%2Ftab.component.ts