javascript - 每个组件传递 action() 时出错

Question

我有以下按钮组件。

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  template: ` <ion-button color="{{color}}" (click)="action()">
                {{title}}
              </ion-button>`
})
export class ButtonComponent implements OnInit {

  @Input() public title: string;
  @Input() public color = 'primary';
  @Input() public action = '';

  constructor() { }

  ngOnInit() {
  }

}

但是当我将 action() 传递给它时它不起作用，有谁知道我需要做什么才能将此属性作为组件传递？

Answer 1

(click)="action()" 表示它期待一个名为action的方法，你需要稍微修改一下，

像这样尝试:

Working Demo

家长:

title = 'Btn Title';
action = "save"

<app-button [title]="title" [action]="action"></app-button>

child :

<ion-button color="{{color}}" (click)="this[action]()">
   {{title}}
</ion-button>

或者，

<ion-button color="{{color}}" (click)="onClick()">
            {{title}}
</ion-button>


onClick() {
   this[this.action]()
}