Можно ли включить и отправить событие в строку, которая очищается с помощью канала DomSanitizer в Angular? - PullRequest
Новая
       30

Можно ли включить и отправить событие в строку, которая очищается с помощью канала DomSanitizer в Angular?

0 голосов
/ 04 июня 2018

Я попытался передать событие click кнопке, которая отображается с помощью DomSanitizer.Но ограниченный метод не вызывается при нажатии кнопки.

component.ts 

export class MyComponent {
   htmlElement = '<button class="btn btn-primary" (click)="onClick()">Add</button>';

onClick() {
    console.log('submitted');
  }
}

component.html 

<div [innerHtml]="htmlElement | sanitizer"></div>

pipe.ts 

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

@Pipe({
  name: 'sanitizer'
})
export class SanitizerPipe implements PipeTransform {
  constructor(private _sanitizer: DomSanitizer) {}
    transform(v: string): SafeHtml {
      return this._sanitizer.bypassSecurityTrustHtml(v);
    }
}

кнопка отображается правильно со стилем.Но событие щелчка не срабатывает.

Есть ли какое-либо исправление или альтернативное решение для этого?

1 Ответ

0 голосов
/ 04 июня 2018

Это потому, что (click) = "onClick () является угловым, а не« нормальным »HTML. Когда вы используете его со связыванием innerhtml, angular не переводится в обычный HTML, но остается таким, как есть, и dom не делает 'Я не могу этого понять.

В нашем проекте мы пытались сделать аналогичную вещь, но не нашли решения для этого, чтобы работать с угловым html. В конечном итоге мы решаем совершенно другой подход, поэтому у нас не будетиспользовать привязку innerhtml. Если у вас есть возможность решить эту проблему, не вводя html, подобный этому, это было бы безопаснее и проще.

См. также эту проблему: ngModel, нажмите не работает в угловом 4 вдинамически добавляемый html

...