在Angular中创建可重用的按钮组件

Question

我试图在Angular 5中创建一个组件，该组件将包含按钮的可重用模板。在我的应用程序的不同部分中，按钮将调用不同的函数，因此我希望能够告诉按钮的给定实例调用什么函数。我知道我可以在需要的地方为按钮创建HTML标记，但是我希望可以创建一个可重用的组件，以便确保整个应用程序中的格式一致。

错误

 Got interpolation ({{}}) where expression was expected at column 0 in 
        [{{functioncall}}]

零件

<div id = "button">
  <button type="button" class= "btn" (click) ="{{functioncall}}" >{{label}}</button>
</div>

和HTML

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

    @Component({
      selector: 'app-button',
      templateUrl: './button.component.html',
      styleUrls: ['./button.component.css']
    })
    export class ButtonComponent implements OnInit {
      @Input() label:string;
      @Input() functionCall:string;

      constructor() { }

      ngOnInit() {
      }
    }

Answer 1

您必须使用@Output装饰器发出一些事件（从孩子到父母）

button.component.ts：

@Input() label: string;
@Output() onClick = new EventEmitter<any>();

onClickButton(event) {
    this.onClick.emit(event);
  }

button.component.html：

<div id = "button">
  <button type="button" class= "btn" (click)="onClickbutton($event)" >{{label}}</button>
</div>

parent.component.ts

label = "button label"

  functioncall(event) {
    console.log('functioncall', event);
  }

parent.component.html

<app-button (onClick)="functioncall($event)" [label]="label"></app-button>

参见示例：https：//stackblitz.com/edit/angular-gghsax

Answer 2

除了@miladfm 答案之外，我还建议使用<ng-content></ng-content>此处的指令来传递内容而不是拉入{{label}}，将@Output装饰器分配给click代替onClick，并使用MouseEvent类型代替any。使用这些更改将允许按钮组件在使用时在语法上更像本机按钮：

button.component.ts

...
@Output() click = new EventEmitter<MouseEvent>();

onClickButton(event) {
  this.onClick.emit(event);
}
...

按钮.component.html

<div id = "button">
  <button type="button" class="btn" (click)="onClickbutton($event)">
    <ng-content></ng-content>
  </button>
</div>

父组件.ts

...
functioncall(e: MouseEvent) {
 // do stuff
}
...

父组件.html

<app-button  (click)="functioncall($event)">Your Label Here</app-button>