カスタムディレクティブangle 4でonclick（）を実装する

Question

シンプルなボタンとディレクティブを持っています。ボタンのスタイルにアクセスしたいので、onclick（）関数を使ってMarginLeftを追加します。クリックでこれをどのように使用できますか？助けてください：

ディレクティブ：

@HostListener('onClick') onClick(){ 
    this.element.nativeElement.style.marginLeft=20; 
    console.log("marzi"+this.element.nativeElement.style.marginLeft); 
} 

リモートことができますこの方法：あなたのディレクティブでHostListenerを使用することができ

<p Bluecolored> 
    new-fom works! 
</p> 
<h1 Bluecolored>Blue Colored</h1> 
<button (click)="clicked()" Bluecolored>Click</button> 

Answer 1

：これはテンプレートである

import { Directive, ElementRef } from '@angular/core'; 

@Directive({ 
    selector: '[Bluecolored]' 
}) 
export class BluecoloredDirective { 

    constructor(private element:ElementRef) { 
    console.log(element); 
    element.nativeElement.style.color="blue"; 
    } 
clicked(){ 
    this.element.nativeElement.style.marginLeft=20; 
    console.log("marzi"+this.element.nativeElement.style.marginLeft); 
} 
} 

を(click)="clicked()"ボタンからも

私はonClickという名前を付けましたが、それもクリックした名前にすることができます