Question

我有一个名为home的组件，对此有一些描述，其中还有button。如下图所示。

我在另一个名为home和car的2个组件中重用了相同的bike组件。
在car组件中，单击按钮（即主页组件中存在的按钮）后，我在对话框窗口中调用了名为car-booking的组件。现在已经完成了此要求。
但是我也在home组件中重用了bike组件。在自行车组件上，单击按钮（主页组件中存在的按钮），我应该在对话框窗口中调用另一个组件(ex bike-booking)。

如何根据特定按钮在组件中的存在来更改其特定的（单击）功能？

堆叠闪电战 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

根据组件中存在的按钮调用其他对话框窗口

1 个答案: