Angular 4：更新视图

Question

总的来说，我对 Web 开发非常陌生，但我正在尝试构建我的网站，但遇到了以下我无法解决的问题。我正在使用角度 4 我有一个 div 突出显示我的 html 文件中的一些代码：

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

在我的打字稿文件中：

step1Updated = false;
step1 = '';

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

现在在我的 html 页面上，当我从执行onStep1() 的不同内容的按钮中单击时，我的字符串插值中的内容发生了变化，{{ step1 }}，但我的prism-block 中的内容没有。我可以看到这是因为我们需要双向数据绑定，但我尝试将[(ngModel)]="step1" 双向数据绑定放在 prism-block、div 等中......希望它能够捕获更新然后更新该块，与将代码放入[(code)] 相同，但都导致错误..

任何帮助或建议将不胜感激！

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