Ошибка при передаче 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, вам нужно немного изменить,

Попробуйте так:

Рабочая демонстрация

Родитель:

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

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

Ребенок:

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

или,

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


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

Answer 2

Если вы хотите передать функцию action из вашего родительского компонента, вы должны использовать @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>

попробуйте это, если какие-либо вопросы не стесняйтесь задавать.