Событие в динамически заполненном html-сообщении в angular 4 не работает

Question

Я отображаю содержимое оповещения динамически, используя управление оповещениями.

Код:

let alert = this.alertCtrl.create({
           message: '<div class="dialogMask">'+
                     '<div class="memberItem">'+

                       '<div class="memberDetails">'+
                    '<span class="name">'+this.name+'</span>'+

                    '</div>'+
                 '<div class="userOptions"><span class="call" 
                  (click)="callMemberUsingDialer()"></span>'+

                 '</div>'+
                '</div>',

             buttons:[
              {

                   role:'cancel',
                   handler:()=>{
                         console.log('alert dismissed');
                  }
                   }
                     ]
                  })

Функция callMemberUsingDialer () не выполняется, когда я выбираю событие click в вышеуказанном динамическом html-содержимом в контроллере оповещений.

Скажите, пожалуйста, как это сделать?

Answer 1

Вы можете добиться этого поведения двумя способами:

1) генерировать компонент во время выполнения (это довольно сложное решение, я бы этого не делал);

2) обновите alertCtrl.create. После того, как вы вставите разметку, вам нужно запустить синхронное обнаружение изменений и связать все события, используя elementRef. Например, вы можете создать список кортежей типа [селектор, событие, слушатель] и использовать его позже в методе create().

так:

create(options) {
    /* inserting markup here */
    this.changeDetectorRef.detectChanges();
    options.eventBindings.forEach(([selector, event, listener]) => {
        const element = this.elementRef.nativeElement.querySelector(selector)
        if(element) { 
            element.addEventListener(event, listener); 
        }
    }
}