Javascript 为每个组件传递操作（）时出错

我有下面的按钮组件

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() {
  }

}

从'@angular/core'导入{Component，OnInit，Input}；
@组成部分({
选择器：“应用程序按钮”，
模板：`
{{title}}
`
})
导出类ButtonComponent实现OnInit{
@Input（）公共标题：字符串；
@Input（）公共颜色='primary'；
@Input（）公共操作=“”；
构造函数（）{}
恩戈尼尼特（）{
}
}

但是当我将

action（）

传递给它时，它不起作用，有人知道我需要做什么才能将此属性作为组件传递吗？

（单击）=“action（）”

表示它需要一个名为

action

的方法，您需要稍微修改一下

试着这样做：

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

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

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

  constructor() { }

  ngOnInit() {
  }

}

<app-button (action)="yourFunction($event)"></app-button>

家长：

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

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

title='Btn title'；
action=“保存”

儿童：

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

{{title}}

或者

{{title}}
onClick（）{
此[此.操作]（）
}

如果要从父组件中提供操作函数，应使用@Output（）而不是@Input（），如下所示：

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

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

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

  constructor() { }

  ngOnInit() {
  }

}

<app-button (action)="yourFunction($event)"></app-button>

从'@angular/core'导入{Component，OnInit，Input，Output，EventEmitter}；
@组成部分({
选择器：“应用程序按钮”，
模板：`
{{title}}
`
})
导出类ButtonComponent实现OnInit{
@Input（）公共标题：字符串；
@Input（）公共颜色='primary'；
@Output（）公共操作：EventEmitter=neweventemitter（）；
构造函数（）{}
恩戈尼尼特（）{
}
}

现在，在父组件中，您可以像这样调用所需的函数：

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

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

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

  constructor() { }

  ngOnInit() {
  }

}

<app-button (action)="yourFunction($event)"></app-button>

---

如果有任何问题，请尝试此操作。

您不能用另一个名称重命名它，因为我可以看到ButtonComponent中已经有一个action（）函数。当我传递属性this[this.action]不是函数HTML:TS:public go（）：void{console.log（'test'）时，我遇到了此错误请参阅app.component.ts.I希望执行来自app.component.ts`[action]=“action”`的方法，这里您仅从父级传递