Угловые 4 санитарно-гигиенические прокладки для нестандартных компонентов

Question

У меня есть модальный сервис, который принимает объект в качестве параметра, как это:

    modal = {
      title: My Modal,
      body: template
    }

Это передается модальному компоненту, который содержит шаблон для модального (используя bootstrap 4).

<div class="modal-header">
    <h4 class="modal-title">{{title}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="onCancel()">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body" [innerHtml]="body | keepHtml"></div>
<div class="modal-footer">
    <button (click)="onCancel()" class="btn">
        <span>Cancel</span>
    </button>
    <button (click)="onOk()" class="btn btn-primary">
        <span>Ok</span>
    </button>
</div>

Тело проходит через трубу очистки, основанную на этом: https://medium.com/@AAlakkad/angular-2-display-html-without-sanitizing-filtering-17499024b079

Все работает нормально, пока я не попытаюсь использовать собственный селектор компонентов в теле, и он не отображается. Я не получаю ошибку очистки в консоли. Кто-нибудь знает, почему это происходит и как это исправить?

Answer 1

Это не связано с санитарной обработкой. Angular просто не поддерживает создание компонентов таким способом динамически. Angular генерирует код JavaScript для разметки, специфичной для Angular, при создании приложения Angular. Разметка, добавленная во время выполнения, не имеет такого эффекта.

Способ компиляции компонентов во время выполнения см. В разделе Как использовать / создать динамический шаблон для компиляции динамического компонента с Angular 2.0?