Richtlinie Ausführungsreihenfolge in Winkeln 2

Question

Wenn ich eine einfache Schaltfläche mit einem Click-Handler und einem benutzerdefinierten-Attribute Richtlinie wie folgt:

<button (click)="save()" attributedirective="project saved">Save</button> 

Und in meinem Attribut Direktive Ich bin mit dem hostlistener Dekorateur dem zuhören click event:

@Directive({ 
    selector: `[attributedirective]` 
}) 
export class AuditPusher { 
    @Input('attributedirective') attributedirective: string = 'Missing message!'; 

    @HostListener('click', ['$event']) 
    pushAudit() { 
     console.log('text:'+this.attributedirective.toString()); 
    } 
} 

Welcher Code wird zuerst ausgelöst? Das save() für das click-Ereignis oder den Code in meiner attribute-Direktive? - Und: Stellen Sie sich vor, Sie hätten zwei Attribut-Direktiven. Wer von denen wird zuerst feuern? In Angular 1 gab es so etwas wie Richtlinienprioritäten, wie wird das in Angular 2 gemacht? Ich finde es schwierig, diesbezüglich eine Dokumentation zu finden.

Answer 1

Soweit ich weiß ist die Reihenfolge der Ausführung undefiniert. Sie sollten sich nicht auf eine bestimmte Reihenfolge verlassen.

Answer 2

Ich denke Prioritätskonzept ist noch nicht in Angular2. (Wenn es mir noch nicht bewusst ist) Aber man sollte sich nicht auf eine bestimmte Reihenfolge verlassen, wie schon gesagt.

Aber wie Sie speziell gefragt haben. Ordnung wäre,

1), wenn Seite oder eine Komponente geladen wird, wird <button (click)="save()" attributedirective="project saved">Save</button> geladen zu und wegen der Richtlinie ** (attributedirective) an Taste, Angular2 initialisiert Richtlinie (attributedirective) und bindet es zum Knopf.

2) Als Save() ist eine Funktion zum nativen Klick (Angular2 Weg) Fall Taste angebracht, wenn Sie darauf klicken, wird es save() zuerst anrufen und dann wird es für andere Bindung der Ereignisse aussehen (falls vorhanden) an ihm gekoppelten Teile (z. B. pushAudit)

Answer 3

A quick and dirty Weg, um dieses, wenn ich zwei Attribut-Richtlinien hatte und Angular ausführte DirectiveB vor DirectiveA aber ich brauchte es in die andere Richtung zu haben, um war zu verzögern das Zeug, das ich zuletzt ausführen musste:

export class DirectiveA { 
    ngOnInit() { 
     doStuff(); 
    } 
} 

export class DirectiveB { 
    ngOnInit() { 
     setTimeout(() => { 
      doMoreStuff(); 
     }, 0); 
    } 
} 

Wenn Sie setTimeout(0) tun es Ausführung zur nächsten Winkelverarbeitungszyklus zu verschieben, die genau das, was ich für alles, was in meinem Fall benötigen in DirectiveA in der Zeit, um eingerichtet werden Ereignisse aus DirectiveB kommen zu behandeln.