输入组件的 Angular TypeScript innerHTML 绑定答案

【问题标题】：Angular TypeScript innerHTML binding for input components输入组件的 Angular TypeScript innerHTML 绑定
【发布时间】：2017-07-18 09:44:47
【问题描述】：

假设我从 MongoDB 中检索 HTML 代码的 [字符串]，例如

["<div class=list-group-item><span><label>Enter text</label> : <input type =text placeholder=value [(ngModel)]=text0 index=gen > </span> </div>",
"<div class=list-group-item><span><label>Enter text</label> : <input type =text placeholder=value [(ngModel)]=text1 index=gen > </span> </div>"]

我处理我对其进行消毒并希望将其制成具有完整功能的形式！

我的html代码：

<p>
  DATA:
{{this.id}}
</p>
<span *ngFor="let item of this.code;let x= index;"><div  [innerHTML]="sanitizer.bypassSecurityTrustHtml(this.code[x])" ></div>
  {{this.item}}<br>
  WORK GOdDAMMIT!!: {{text0}}

</span>

我对 text0 进行了硬编码，看看它是否决定工作！

现在，你们能否给我一个基本示例，说明如何访问 ngModel 值以便我可以做到这一点？

在 AngularJS(v1.6) 中，我设法使用一个名为 bind-html-compile 的外部模块来实现它

任何小例子等都会非常有益！

如果你想看看我的 component.ts，这里：

@Component({
  selector: 'app-form-show',
  templateUrl: './form-show.component.html',
  styleUrls: ['./form-show.component.css'],
   providers: [FormShowService]
 })
export class FormShowComponent implements OnInit {
  private id:string;
  private code:string;
  //private htmlCode :HTML
  constructor(
    private http: Http,
    private router: Router,
    private route : ActivatedRoute,
    private sanitizer: DomSanitizer
  ) {

  }

  ngOnInit(){
      //console.log(this.Code)
      console.log(this.route.params['value'].id);
      this.id=this.route.params['value'].id
      this.getID();
  }

getID(){
  let jsonData : JSON;
  jsonData=JSON.parse('{"data" :"'+ this.id +'"}');

  return this.http.post('/api/getInfo', jsonData).subscribe(
     res => {res.json();
       console.log(res.json());
       let resProc = res.json();
       console.log(resProc);
       this.code=resProc[0].script;
       console.log(this.code);
      });

}



}

谢谢！

【问题讨论】：

标签： mongodb angular typescript innerhtml

【解决方案1】：

我为您和任何可能遇到类似情况的人提供了一个更简单的解决方案。我尝试了 Viewcontainerreff，但无济于事。在搜索 npm.js 之后，我相信您所需要的就是这个包！

The Fantabulous ng-dynamic

而且它的用法也很简单：

<div *dynamicComponent="your_html_string">loadin</div>

它适用于 angular4 指令，是您所需的全部！

祝你好运

~罗尼·麦克纳马拉

【讨论】：