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装饰器分配给{{1} }代替click，并使用onClick类型代替MouseEvent。使用这些更改将使按钮组件在使用时在语法上更像本机按钮：

button.component.ts

any

button.component.html

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

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

parent.component.ts

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

parent.component.html

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

Answer 3

可重复使用的组件-对我有用

我已将按钮创建为可重复使用的组件

button.component.html

button.component.ts

export class ButtonComponent {

      @Input() label: string;

      @Output() onClick = new EventEmitter<any>();

      constructor() {}

      onClickButton(event) {

          this.onClick.emit(event);

      }
 }

user.component.html

<应用程序按钮（click）=“ functioncall（$ event）” [label] =“ label”>
user.component.ts

label ='Hello World';

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

3 个答案: