Konsolidierung von zwei Direktiven in einem einzigen

Question

Angenommen, man hat zwei vordefinierte Direktiven dir1 und dir2 (die von einer API eines Drittanbieters zur Verfügung gestellt werden, über die man keine Kontrolle hat). Lassen Sie uns sagen, dass diese ein HTML-Element bezieht sich wie folgt zusammen:

<div dir1="red" [dir2]="123">... My Content ...</div> 

ich gefunden habe mich die über den Richtlinien mit den exakt gleichen Bindungswerte an mehreren Stellen in meinem Code anwenden. Anstatt mich zu wiederholen, würde Ich mag meine eigene benutzerdefinierte Richtlinie erstellen, es myDir nennen, dass ich so gelten könnte:

<div MyDir >... My Content ...</div> 

Diese genau das gleiche wie die Anwendung dir1 und dir2 wie im Stand sein sollte Beispiel oben, dh es wird die Werte "red" und 123 hart in seiner Klasse codiert haben.

Ich habe versucht, Host-Bindungen wie in dem folgende plunker Beispiel voran, aber das funktioniert nicht ..

Eine Idee, die ich ist, wenn nur Typoskript Mehrfachvererbung hat, dann würde ich einfach schreibt die MyDir Klasse einer Erweiterung von Dir1undDir2 ..

Meine Frage ist, wie ich mich über die benutzerdefinierte Richtlinie (MyDir) Schreiben der beabsichtigten Verwendung zu erreichen?

Mit freundlichen Grüßen, Danke!

https://plnkr.co/edit/W20Wvew326qsGfPU5H6v

Answer 1

(TL; DR Siehe Plunker here)

Hier finden Sie, was meine Lösungen für das Problem endete als, wie oben dargestellt. Beachten Sie, dass dies nicht die allgemeinste Lösung ist; In anderen Szenarien hängt die Anpassungsfähigkeit weitgehend davon ab, wie das öffentliche API der betreffenden Richtlinien aussieht. Es sollte gut funktionieren, wo die Richtlinien kombiniert werden müssen atleast ElementRef als einer der Injektion Abhängigkeiten wie:

constructor(private elRef: ElementRef, /*...*/) { /*...*/ } 

Dieses gut der Fall sein kann, wenn die Richtlinien für die Änderung der Styling eines Elements verantwortlich sind.

Was ich tat, war, habe ich einfach zwei newDir1/Dir2 Objekte in der MyDir ‚s vorbei ElementRef als Kontext für Dir1/Dir2 wie so:

// inside MyDir constructor 
this.d1 = new Dir1(this.elRef, /*...*/); 
this.d2 = new Dir2(this.elRef, /*...*/); 

Dann habe ich die öffentlichen Eigenschaften (@Input Bindings) von d1/d2 zu den Werten Ich brauche sie dauerhaft zu sein (um zu vermeiden, mich zu wiederholen):

//inside MyDir constructor 
this.d1.dir1 = "red"; 
this.d2.dir2 = 123; 

Als nächstes musste ich nur versuchen, die öffentlichen Methoden d1/d2 mit MyDir durch Aufruf der ersteren Methoden innerhalb der entsprechenden Methode (n) der letzteren, z. Hier

ngAfterContentInit() { 
    this.d1.ngAfterContentInit(); 
    this.d2.ngAfterContentInit(); 
} 

ist die Plunker mit diesem alle zusammengestückelt https://plnkr.co/edit/TCagW8vOPrqSiOT9Oztf