Невозможно заменить строку текстовым полем в TypeScript

Saurabh Sharma спросил: 28 марта 2018 в 03:33 в: javascript

Я хотел заменить __ на текстовое поле в Angular 2/4. Здесь внизу ссылка имеет пример.

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

3 ответа

Есть решение
estus ответил: 28 марта 2018 в 03:44

Необработанный HTML не может быть связан в шаблоне компонента, он должен быть сначала помечен как санированный:

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;
}
Cristian Traìna ответил: 28 марта 2018 в 03:43

Angular дезинфицирует ваш HTML, чтобы предотвратить атаки XSS. Вы не можете ввести HTML так легко! Вам нужно продезинфицировать его.

Вы можете использовать bypassSecurityTrustHtml(value: string) и узнать больше об этом здесь.

Обратите внимание, предполагается, что вы знаете, что делаете :

Эти ситуации должны быть очень редкими, и следует предпринять чрезвычайную осторожность, чтобы избежать создания ошибки безопасности межсайтового скриптинга (XSS)!

abbastec ответил: 28 марта 2018 в 03:50
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);
    }
}

Ссылка: Вставить < input > во внутреннем HTML угловом 2