Javascript 使用 Angular EventEmitter 的正确方法

你可以emits 任何东西

//家长

@Component({
  selector: "parent",
  template: ` <child
      [buttons]="buttons" (click)="$event()"
    ></child>
    <span>{{ description }}</span>`
})
export class ParentComponent {
  description = "";
  buttons = [
    { name: "foo", callback: this.foo},
    { name: "bar", callback: this.bar},
    { name: "baz", callback: this.baz},
  ];
  foo(){}
  bar(){}
  baz(){}
}

// children

@Component({
  selector: "child",
  template: ` <span *ngFor="let button of buttons">
    <button (click)="onClick(button)">{{ button.name }}</button>
  </span>`
})
export class ChildComponent {
  @Input() buttons: any[];

  @Output() click = new EventEmitter<any>();

  onClick(button: any) {
    this.click.emit(button.callback);
  }
}

Update声音"bizarro"传递函数并使用function()执行，但我们需要认为函数只是一个对象.

假设您定义了两个函数

function1(){console.log("I'm function 1")}
function2(){console.log("I'm function 1")}

在事件单击中，我们调用函数

click()
{
   const mainFunction=this.function1
   mainFunction() //execute the function1
}

或者根据变量

click()
{
   const mainFunction=this.condicion?this.function1:this.function2
   mainFunction() //execute the function1 or the function2 
                  //if condition is true or false
}

变量、对象、数组、函数...物理存储在内存位置.变量、对象、函数的"名称"...只是指向此内存的"指针".

如果我们愿意，我们可以在答案中写下

    <child [buttons]="buttons" (click)="executeFunction($event)"></child>

   executeFunction(mainFunction:any)
   {
         mainFunction()
   }

如果我们想要，我们可以键入函数，使其更加清晰，如果我们所有的函数都没有参数，也没有返回任何内容，那么可以使用这个丑陋的"any"用法

   executeFunction(mainFunction:()=>void)
   {
         mainFunction()
   }

和

@Output() click = new EventEmitter<()=>void>();