DOM 清理 function 不是 escaping 用户输入的文本

Question

试图使用 Angular 清理 API 与用户在 angular 表单中输入的用户输入。

但是 Angular 的Sanitize()不是 escaping 输入的输入。

.ts

export class AppComponent {
  userName = 'Angular';

  constructor(private domSanitizer: DomSanitizer) {}

  onSave(): void {
    console.log('save clicked api call');
    this.sanitizeUserName();
  }

  sanitizeUserName(): string {
    const domSanitize = this.domSanitizer.sanitize(5, this.userName);
    console.log('sanitized text/html', domSanitize);
    return domSanitize;
  }
}

.html

<form #userForm="ngForm">
  <label>Username: </label>
  <input type="text" [(ngModel)]="userName" name="username" />

  <div>
    <span>View : </span>
    <div [innerHTML]="userName"></div>
  </div>

  <br />
  <br />
  <button type="button" (click)="onSave()">Save</button>
</form>

请在此处找到实时示例在我提供的以下示例中的文件中，以验证输入是否经过消毒。 我尝试在 angular 表单中使用输入，如下面的链接所示作为示例代码。

Answer 1

也许在 html 正文下面添加 js 脚本