implementieren onclick() in benutzerdefinierte Direktive eckig 4 ​​

Question

Ich habe eine einfache Schaltfläche und eine Direktive Ich möchte den Stil der Schaltfläche zugreifen, fügen Sie MarginLeft mit einer onclick() -Funktion in der Direktive, es funktioniert nicht aber die CSS aus Konstruktor funktioniert Wie kann ich das mit einem Klick nutzen? bitte helfen:

der Richtlinie:

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

dies die Vorlage:

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

Auf diese Weise können remote:

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

Answer 1

Sie eine HostListener in Ihrer Richtlinie verwenden könnte (click)="clicked()" von der Taste auch

Ich nannte meine onClick, aber Sie könnten es auch geklickt aswell