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

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

错误

组成部分

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

---

您必须使用

@Output

装饰器来发出一些事件（从子级到父级）

按钮.组件.ts:

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

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

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

parent.component.html

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

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

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

---

除了@miladfm answer之外，我建议使用这里的
指令传递内容，而不是拉入
{label}
，将
@Output
装饰符指定给
单击
而不是
onClick
，并使用
MouseEvent
类型而不是
any
。使用这些更改将允许按钮组件在使用时在语法上更像本机按钮：

按钮.组件.ts

label = "button label"

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

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

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

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

export class ButtonComponent {

      @Input() label: string;

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

      constructor() {}

      onClickButton(event) {

          this.onClick.emit(event);

      }
 }

parent.component.html

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

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

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

您的标签在这里

可重用组件-这是我的工作

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


button.component.html

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

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

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

{{label}

按钮.组件.ts

label = "button label"

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

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

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

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

export class ButtonComponent {

      @Input() label: string;

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

      constructor() {}

      onClickButton(event) {

          this.onClick.emit(event);

      }
 }

导出类按钮组件{
@Input（）标签：字符串；
@Output（）onClick=neweventemitter（）；
构造函数（）{}
onclick按钮（事件）{
this.onClick.emit（事件）；
}
}

user.component.html

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

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

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


user.component.ts

label = "button label"

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

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

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

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

export class ButtonComponent {

      @Input() label: string;

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

      constructor() {}

      onClickButton(event) {

          this.onClick.emit(event);

      }
 }

标签=‘你好世界’

我用新的StackBlitz链接刷新了应用程序，因为你的链接不再可用（）。此外，我认为您缺少
@Input（）标签：string
作为
按钮.component.ts
中的变量声明（至少引发了该错误）-可能是兼容性问题（现在是7）。然而，这是一项了不起的工作！让我们假设我想要一个图标在按钮（谷歌图标像购物车）。如何动态添加？您可以使用角度内容投影来实现。请看这个例子，如果将事件命名为
click
将触发click事件两次，那么我将坚持使用
onClick
名称。或者，您可以使用
event.stopPropagation（）
，如下所述：