绕过SecuritySecurityTrustHtml Angular 6后文本框不起作用

时间:2018-09-07 11:17:39

标签: angular textbox pipe

我正在Angular 6中创建一个管道,如果通过某些条件,该管道将返回文本框。因为输入不安全。.我正在使用bypassSecurityTrustHtml来解决此问题。现在,我有另一个问题..它显示了文本框,但是我无法对其进行写入或更改。看起来没有禁用,但我无法选择它并进行任何更改。 有人知道发生了什么吗?谢谢!!

import { Pipe, PipeTransform } from '@angular/core';
import { validateConfig } from '@angular/router/src/config';
import { TYPED_NULL_EXPR } from '@angular/compiler/src/output/output_ast';
import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
@Pipe({
  name: 'appConvertElement',
  pure: false
})

export class ConvertElementPipe implements PipeTransform {

  constructor( private _sanitizer: DomSanitizer) { }

  transform(text: string, field: string) {
    return this.ConvertValue(text, field);
  }

  private ConvertValue(text: string, field: string) {
    let transformText = text;


      if (condition)
        return this.createTextBox(text,field);
    }
    return transformText;
  }

  createTextBox(text,id) {
    let textBox = document.createElement('input');
    textBox.type = 'text';
    textBox.setAttribute("value", text);
    textBox.id = id;
    textBox.name = id;
    textBox.value = text;
    textBox.title = text;
   // return textBox.outerHTML;
    return this.safeHTML(textBox.outerHTML);
  }

  safeHTML(v: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }

}

html是:

 <div [innerHTML]="value | appConvertElement: field"></div>

0 个答案:

没有答案