Для вызова другого диалогового окна на основе кнопки, присутствующей в компоненте

Question

У меня есть компонент с именем home, который как описание и button внутри. Как на рисунке ниже.

• Я повторно использую тот же компонент home в двух других компонентах, называемых car и bike.

• Здесь, в компоненте car при нажатии кнопки (я, кнопка e присутствует в домашнем компоненте), я вызываю компонент с именем car-booking внутри диалогового окна. Это требование выполнено сейчас.

• Но я повторно использую компонент home в компоненте bike. В компоненте bike при нажатии на кнопку (кнопка i, e присутствует в компоненте home) я должен вызвать другой компонент (ex bike-booking) внутри диалогового окна.

Как изменить функцию (щелчок) для конкретной кнопки в зависимости от ее присутствия в компоненте?

stackblitz DEMO

Answer 1

Вы можете использовать @Output для отправки события в контейнер, затем в компоненте контейнера вы можете выбрать, что делать при получении события.

HomeComponent

export class HomeComponent  {

     @Output() openDialog = new EventEmitter();

     constructor(public dialog: MatDialog) {}

  open(): void {
     this.openDialog.emit();
  }

}

Шаблон HomeComponent

Hai!! welcome to our application..

<div style="padding:30px;">
  <button mat-raised-button  (click)="open()" color="primary">ADD</button>
</div>  

Шаблон BikeComponent

<app-home (openDialog)="openDialog($event)"></app-home>

BikeComponent TS

export class BikeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  openDialog($event: any) {
     // open desired bike component
  }

}

Шаблон CarComponent

<app-home (openDialog)="openDialog($event)"></app-home>

CarComponent ts

export class CarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  openDialog($event: any) {
     // open desired car component
  }

}

Посмотрите на официальный документ: https://angular.io/guide/component-interaction