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

Question

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

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

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

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

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

Стеблитц ДЕМО

Answer 1

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

HomeComponent

export class HomeComponent  {

     @Output() openDialog = new EventEmitter();

     constructor(public dialog: MatDialog) {}

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

}

ГлавнаяКомпонент шаблон

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>

Байкомпонент тс

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