Question

我想在Angular 2/4中用文本框替换__。在下面的链接我有例子。

https://stackblitz.com/edit/angular-ajkvyq?file=app%2Fapp.component.ts

Answer 1

Angular会对您的HTML进行清理，以防止XSS攻击。你不能这么容易地注入HTML！你需要消毒它。

您可以使用bypassSecurityTrustHtml(value: string)并详细了解此over here。

注意，假设你知道自己在做什么：

这些情况应该非常罕见，必须特别注意避免创建跨站点脚本（XSS）安全漏洞！

Answer 2

未授权的HTML无法在组件模板中绑定，它应该是marked as sanitized first：

constructor(private sanitizer: DomSanitizer) {}

replaceFillBlanks(question): SafeHtml {
  var $inputBox = '<input type="text" name="fillBox"/>';

  let q = this.sanitizer.bypassSecurityTrustHtml(question.replace(/__/g,$inputBox));
  return q;
}

Answer 3

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  question = "How are __ doing today ?. I'm doing __.";

  constructor(private _sanitizer: DomSanitizer){}

  replaceFillBlanks(question){
      var $inputBox = '<input type="text" name="fillBox"/>';

      // if you'll replace any other string except text box this will work fine. 
      //var $inputBox = 'hi';

      let q = question.replace(/__/g,$inputBox);
      console.log(q);
        return this._sanitizer.bypassSecurityTrustHtml(q);
    }
}

参考：Inject <input> in innerHTML angular 2

无法在TypeScript中按文本框替换字符串

3 个答案: