web-dev-qa-db-ja.com

Angularで再利用可能なボタンコンポーネントを作成する

私は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() {
      }
    }
angularbutton
7
Michael Mason

@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

8
miladfm

@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);
}
...

button.component.html

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

parent.component.ts

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

parent.component.html

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