动态函数调用 Angular 2

Question

我在一个变量中有函数名称，我在按钮的单击事件上分配该变量。但它不工作。有帮助吗？

@Component({
  selector: 'my-app',
  template: `
    <div>
    <h2>Function name is: {{FunctionName}}</h2>
    <input type="button" value="click here" (click) = [FunctionName]()>
    </div>
    <p>{{value}}</p>
  `,
})
export class App {
  FunctionName:string;
  value: string;
  constructor() {
    this.FunctionName = 'clickFunction'
  }

  clickFunction(){
    this.value = "button clicked";
  }
}

这是代码

Plunker Code

Answer 1

语法需要像这样：

<input type="button" value="click here" (click) ="this[FunctionName]()">

修复了插件：https://plnkr.co/edit/xGgFQuHNH72Q9FdOPEdK?p=preview

Answer 2

试试这个

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Function name is: {{FunctionName}}</h2>
      <input type="button" value="click here" (click)="FunctionName()">
    </div>
    <p>{{value}}</p>
  `,
})
export class App {
  FunctionName: Fn;
  value: string;
  constructor() {
    this.FunctionName = this.clickFunction; //assign function to variable.
  }

  clickFunction(){
    this.value = "button clicked";
  }
}

在线演示：https://plnkr.co/edit/6uVZd0L0KlwMdaIKgPXq?p=preview

动态函数调用 Angular 2

Dynamic function calling Angular 2

angular

typescript

dynamic-function