Angular 6 - привязать HTML, созданный после компиляции, к событию клика - PullRequest
Новая
       10

Angular 6 - привязать HTML, созданный после компиляции, к событию клика

0 голосов
/ 04 декабря 2018

Я добавляю HTML-элементы во время выполнения, когда пользователь нажимает кнопку.

Я делаю это, устанавливая внутренний html-файл div для встроенной строки, а затем использую DOMSanitizer.

Визуально это выглядит хорошо, но события click в новом HTML не связаны, поэтому ничего не работает, я думаю, потому что HTML генерируется после компиляции.

Вот код, вызываемый, когда пользователь нажимает, чтобы добавить новый компонент (он заполняется правильными данными), кто-нибудь может подсказать, как мне подключить его к событию щелчка на изображении для удаления?

html на странице: 

<div class="col-sm-9" >
      <div [innerHtml]="contentHtml"></div>
</div>

код: 

async AddText(contentText: string) {
    this.htmlToAdd = this.htmlToAdd + ( '<br> <div class="card text-left">' +
    '<div class="card-header text-secondary">Attraction Text' +
      '<img  align="right" class="image-hover pull-right table-header-padding" src="assets/images/LockLineIcon.png" />' +
      '<img #delete class="image-hover float-right text-danger icon-pad draft-icon-indent" src="assets/images/DeleteIcon.png" (click)="this.delete(0)"/>' +
    '</div>' +
    '<div class="card-body" >' +

    '<textarea  id="text" name="text" type="text" class="form-control" required maxlength="2048" >' + contentText + '</textarea>' +
    '</div>' +
    '<div class="card-footer">' +
      '<img align="right" class="pull-right table-header-padding" src="assets/images/DragUpDownIcon.png" />' +
    '</div>' +
  '</div>');
  this.contentHtml = this.sanitizer.bypassSecurityTrustHtml(this.htmlToAdd);
  }

1 Ответ

0 голосов
/ 04 декабря 2018

Ваш DOM может быть продезинфицирован, но он не является частью DOM Angular.Если вы хотите, чтобы Angular видел DOM, вы должны позволить Angular создать DOM - и это означает динамические компоненты.Примерно так будет работать: 

@Component({
  selector: 'my-component',
  template: `<h2>Stuff bellow will get dynamically created and injected<h2>
          <div #vc></div>`
})
export class MyComponent {
  @ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;

  private cmpRef: ComponentRef<any>;

  constructor(private compiler: Compiler,
              private injector: Injector,
              private moduleRef: NgModuleRef<any>,
              private backendService: backendService,
              ) {}

  ngAfterViewInit() {
    // Here, get your HTML from wherever.
    this.someService.getThatAsyncHTMLOfYours.subscribe(rawHTML => this.createComponentFromRaw(rawHTML));
  }

  // Here we create the component.
  private createComponentFromRaw(template: string) {
    // Let's say your template looks like `<h2><some-component [data]="data"></some-component>`
    // As you see, it has an (existing) angular component `some-component` and it injects it [data]

    // Now we create a new component. It has that template, and we can even give it data.
    const tmpCmp = Component({ template, styles })(class {
      // the class is anonymous. But it's a quite regular angular class. You could add @Inputs,
      // @Outputs, inject stuff etc.
      data: { some: 'data'};
      ngOnInit() {
        /**
         * HERE'S YOUR STUFF
         * do stuff here in the dynamic component, like binding to locally available variables and services.
         */
      }
    });
...