Как я могу отрендерить шаблон с контекстом в угловом компоненте? - PullRequest
Новая
       26

Как я могу отрендерить шаблон с контекстом в угловом компоненте?

2 голосов
/ 03 ноября 2019

Я использую ng-template в Angular8 для создания множественного перевода для отображения уведомления для пользователя от компонента, но я не могу получить полностью сгенерированный внутренний HTML-шаблон перед подключением к DOM, поскольку контекст еще не связан. Как я могу визуализировать шаблон с его контекстом и получить для этого внутренний HTML-код?

Я попытался использовать ViewContainerRef для визуализации шаблона и присоединить его DOM, и он работает нормально, но я не хочуприкрепите что-нибудь к DOM и прочитайте это позже.

Шаблон: 

<ng-template #activeDeactiveSuccessMessage let-card="card">
    <span i18n="@@card.notification">Notification</span>
    <span i18n>{card.lockStatus, select,
      LOCKED {Card number ending with {{card.number}} has been deactivated.}
      UNLOCKED {Card number ending with {{card.number}} has been activated.}
      other {Card number status changed to {{card.lockStatus}} }}</span>
</ng-template>

Код компонента: 

@ViewChild('activeDeactiveSuccessMessage', { static: false }) private activeDeactiveSuccessMessage: TemplateRef<any>;

Ниже приведен фрагмент кода для прикрепления визуализированного шаблона к DOMи работает нормально: 

let el = this._viewContainerRef.createEmbeddedView(this.activeDeactiveSuccessMessage, { card });

Но Я не хочу присоединяться к DOM , хочу получить обработанный шаблон внутри компонента перед подключением . использовал приведенный ниже код для получения текста, но для второго узла, который нуждался в контексте, возвращает комментарий!: 

let el = this.activeDeactiveSuccessMessage.createEmbeddedView({ card });
console.log(el.rootNodes[0].innerHTML); // -->     Notification
console.log(el.rootNodes[1].innerHTML); // -->     <!----><!----><!----><!---->

Я ожидаю вывод Card number ending with 6236 has been deactivated. для второго узла.

...