Angular 4: Aktualisierung der Ansicht

Question

Ich bin sehr neu in der Web-Entwicklung im Allgemeinen, aber ich versuche, meine Website zu bauen und stieß auf das folgende Problem, das ich nicht lösen kann. Ich verwende Winkel 4 Ich habe ein div einige Codes in meiner HTML-Datei markieren:

<div *ngIf="step1Updated"> 
    <prism-block 
    [code]="step1" 
    [language]="'python'"> 
    </prism-block> 
    {{ step1 }} 
</div> 

In meiner Typoskript-Datei:

step1Updated = false; 
step1 = ''; 

onStep1(fileType: string) { 
    this.step1 = this.step1service.returnCode(this.language, fileType); 
    this.step1Updated = true; 
} 

Jetzt auf meiner HTML-Seite, wenn ich aus einer Auswahl klicken von Buttons, die onStep1() mit unterschiedlichem Inhalt ausführen, ändert sich der Inhalt innerhalb meiner Stringinterpolation, der {{ step1 }}, aber der Inhalt innerhalb meiner prism-block nicht. Ich kann sehen, dass dies ist, weil wir Zwei-Wege-Datenbindung benötigen, aber ich habe versucht, die [(ngModel)]="step1" Zwei-Wege-Datenbindung in den Prisma-Block, div, etc ... in der Hoffnung, dass es das Update abfangen und dann den Block aktualisieren würde , wie das Setzen von Code in [(code)], aber alle führten zu Fehlern.

jede Hilfe oder Beratung würde wirklich geschätzt werden!

Answer 1

here you need to load PrismComponent dynamically to update its view.refer my plunker(http://plnkr.co/edit/tEgnnS) code. 


    onStep1(fileType: string) { 
    const crf = this.cfR.resolveComponentFactory(PrismComponent); 
    this.cc.clear(); 
    const cf = this.cc.createComponent(crf); 
    (<PrismComponent>cf.instance).code = this.step1service.returnCode(this.language, fileType); 
    }