Question

这是我的最终目标：

我正在尝试从JSON文件呈现输入字段。这是一个示例字符串：

{  
    "id": 1,
    "value": "The answer to life is: (INPUT FIELD HERE WITH ngModel). More content..."
}

（在没有Stack删除的情况下无法输入输入字段，但是输入字段的输入当然会不正确）

现在，我的确使输入字段与innerHTML一起显示，并使用安全管道清理HTML，但是ngModel被忽略。当我控制台注销表单结果时，没有2种方式发生绑定。我以为也许我需要在加载视图后重新渲染字段，但是我不确定如何做到这一点。其他事物（（模糊））也将被完全忽略。

我真的希望有人知道如何做到这一点。我的JSON文件将只有一个值，其中包含许多HTML标记和多个输入字段。

我的项目是ionic3应用程序。

Answer 1

编辑后的帖子

角度组件，指令，事件和属性绑定仅适用于静态添加到组件模板的HTML。

使用[innerHTML] =“ ...”可以将HTML添加到DOM中，但是Angular不会关心它包含的HTML，除了清理。

最好的选择是在运行时使用组件模板编译HTML。

话虽如此，我已经按照本文末尾提到的参考文献创建了一个演示应用程序。这将满足您的要求

https://stackblitz.com/edit/dynami-template-ionic

下面的代码

home.ts

import {Compiler, Component, NgModule, OnInit, ViewChild,
  ViewContainerRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class App implements OnInit {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private compiler: Compiler) {}
  section={}
  ngOnInit() {
    this.addComponent(`<p>Sed ut perspiciatis unde omnis <input type="text" [(ngModel)]="section.answer1" name="answer1"/> sit voluptatem accusantium doloremque laudantium.</p><p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt <input type="text" [(ngModel)]="section.answer2" name="answer2"/>`,
      {
        section:this.section,
        increaseCounter: function () {
          this.counter++;
        }
      }
    );
  }

  submitAnswers(answers){
    console.log(answers);
  }

  private addComponent(template: string, properties: any = {}) {
    @Component({template})
    class TemplateComponent {}

    @NgModule({imports: [ FormsModule ],declarations: [TemplateComponent]})
    class TemplateModule {}

    const mod = this.compiler.compileModuleAndAllComponentsSync(TemplateModule);
    const factory = mod.componentFactories.find((comp) =>
      comp.componentType === TemplateComponent
    );
    const component = this.container.createComponent(factory);
    Object.assign(component.instance, properties);
    // If properties are changed at a later stage, the change detection
    // may need to be triggered manually:
    // component.changeDetectorRef.detectChanges();
  }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<h1>Dynamic template:</h1>
<h2>Workbook</h2>
  <form (ngSubmit)="submitAnswers(section)">
  <div #container></div>
  <h3>This input below is hard coded in the view and works perfectly. Inputs from string are ignored.</h3>
    <input type="text" [(ngModel)]="section.answer3" name="answer3">
    <br />
    <p><em>** Answers are logged in console **</em></p>
    <button ion-button type="submit" block>Submit Answers</button>
  </form>
</ion-content>

裁判：

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

https://stackoverflow.com/a/39507831/6617276

https://stackoverflow.com/a/46918940/6617276

ngModel不会在字符串输入中呈现

1 个答案: