Wie man Angular 2 Wie dynamisch hinzugefügt Router Richtlinie

Question

in this plunker gesehen abholen, ich bin ein HTML zu einem meiner Elemente dynamisch hinzugefügt, die dazu läuft darauf hinaus:

@Component({ 
    selector: 'my-comp', 
    template: `<span [innerHTML]="link"></span>`, 
}) export class MyComponent { 
    private linkContent = '<a routerLink="/my-route">GoTo Route</a>'; 
    private link; 

    constructor(sanitizer: DomSanitizer) { 
     this.link = sanitizer.bypassSecurityTrustHtml(linkContent); 
    } 
} 

Dies führt zu <a routerLink="/my-route">GoTo Route</a> sein hinzugefügt, um das DOM, aber Angular weiß nichts über die Direktive für dieses Element, und bindet nicht daran. Also, wenn Sie auf den Link klicken, führt es zu einem vollständigen Neuladen mit Re-Bootstrap (das funktioniert nicht in Plunk, es gibt nur eine 404).

Frage: wie angular zu sagen, durch das DOM (oder seinen Teil oder sogar ein einzelnes Element) gehen und Komponenteninitialisierung durchführen, wenn nötig?

Answer 1

Angular2 verarbeitet kein HTML, das in irgendeiner Weise außer der Bereinigung dynamisch hinzugefügt wird.

Übergeben '<a routerLink="/my-route">GoTo Route</a>' zu innerHTML macht genau das, übergibt diese Zeichenfolge an das DOM, aber sonst nichts. Es gibt keine Direktive, die instanziiert oder angewendet wird.

Wenn Sie HTML hinzufügen müssen dynamisch, dass verwendet Angular2 Bindungen, Richtlinien oder Komponenten können Sie den HTML-Code zu einem Komponenten-Template hinzu, und fügen Sie dynamisch diese Komponente ViewContainerRef.createComponent() wie gezeigt, zum Beispiel in Angular 2 dynamic tabs with user-click chosen components