Angular 5: Получить событие нажатия на динамически добавляемый HTML-блок

Question

Это мой код: https://angular -gcmti7.stackblitz.io

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

Я столкнулся с проблемой при запуске события click в меню, сгенерированном на элементах. Я должен добавить динамическое меню к динамически генерируемым блокам HTML. Это может быть число N в зависимости от выбора.

Я пробовал это, но не работает: 1) Рендеринг дочернего компонента для селекторов меню // добавляется статически. 2) Прямое отображение HTML // Блок HTML добавляется статически.

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

Answer 1

Ваша логика немного отличается от обычной разработки Angular. Потребовался почти день, чтобы найти решение для вас, но я не пришел с точным решением, но надеюсь, что мои выводы помогут вам.

1. Метод ComponentFactoryResolver resolveComponentFactory принимает угловой компонент.

2. Статья над динамическим внедрением HTML https://medium.com/@caroso1222/angular-pro-tip-how-to-dynamically-create-components-in-body-ba200cc289e6

3. В вашем случае вы внедряете HTML в шаблон, а не в компонент. Чтобы внедрить HTML, сохраните его в переменной и используйте DomSanitizer для его очистки или обхода проверки безопасности

Это может помочь вам.

export class main_page{

data: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}      

  ngOnInit(){ 
    this.getDynamicREST().then((res)=> {
        this.data = this.sanitizer.sanitize(res);
        /* OR */
        this.data = this.sanitizer.bypassSecurityTrustHtml(res);
    })
  };
}

Тогда в вашем шаблоне:

<div class="top">
  <div [innerHtml]="data"></div>
</div>