子组件中的angular 2通用点击事件

Question

在 Angular Web 应用程序的许多页面中使用了一个子组件。子组件有一个调用函数的 (click) 事件。包含此子组件的每个页面都在点击事件时调用具有不同参数的不同函数。

如果父级不同，我如何才能使此 (click) 事件成为通用的或动态的，它调用不同的函数？

// In one component    
(click)="saveData(types, functions)"

// On another component
(click)="showFunctions(index, areas, types)"

在具有不同点击事件的多个页面中使用单个子组件，我们该怎么做？

提前谢谢你。

Answer 1

child :

<button type="button" (click)="onMyClick()">Click<button>

@Output() myClick = new EventEmitter();

onMyClick() {
    this.myClick.emit();
}

家长:

<my-child-cmp (myClick)="firstFunction()"></my-child-cmp>

firstFunction() {
   // whatever
}

家长 2:

<my-child-cmp (myClick)="secondFunction()"></my-child-cmp>

secondFunction() {
   // whatever
}

希望对您有所帮助。如果您需要更多详细信息，请告诉我。

顺便说一句，如果您需要将一些数据从 child 发送给您的 parent ，您可以这样做:

child :

<button type="button" (click)="onMyClick()">Click<button>

@Output() myClick = new EventEmitter();

onMyClick() {
    this.myClick.emit(something);
}

家长:

<my-child-cmp (myClick)="firstFunction($event)"></my-child-cmp>

firstFunction(event: Event) {
   console.log(event); // You will see something here))

}

更新:

如果我们需要从 parent 向 child 发送数据

parent

data: any;

ngOnInit() {
  this.data = 'hello world';
}

<app-child [settings]="data"></app-child>

child :

@Input() settings: any;

ngOnInit() {
  console.log(this.settings);
}