Изменение свойств динамического c компонента, созданного фабрикой компонентов, не влияет на HTML

Question

Я хочу сгенерировать HTML и открыть его в новом окне для печати. У меня есть компонент, который должен генерировать HTML:

import { Component, ViewEncapsulation } from "@angular/core";
import { RelocateResponseVm } from "src/contracts/warehouse/relocateResponseVm";

@Component({
    selector: 'transition-print',
    styleUrls: ['./transition.component.scss'],
    encapsulation: ViewEncapsulation.None,
    templateUrl: './transition.print.component.html'
})
export class TransitionPrintComponent {
    public data: RelocateResponseVm;

    constructor() { }
}

Его шаблон:

<ng-container>
    <div>
        <h1>Operation №{{data.Id}}</h1>
        <p>Date: <b>{{data.OperationDate}}</b></p>
        <p>Name: <b>{{data.Name}}</b></p>
        <p>Description: <b>{{data.Description}}</b></p>
    </div>
</ng-container>

Я создаю экземпляр компонента с помощью следующего кода:

        const componentFactory = this.resolver.resolveComponentFactory(TransitionPrintComponent);
        let componentRef = componentFactory.create(this.injector);
        componentRef.instance.data = relocateDoc;

        console.log(componentRef.location.nativeElement);

Несмотря на заполнение relocateDoc, nativeElement пусто:

<transition-print>
<!---->
<div>
<h1>Operation №</h1>
<p>Date: <b></b></p>
<p>Name: <b></b></p>
<p>Description: <b></b></p>
</div>
</transition-print>

В чем проблема? Как заполнить финал HTML? Далее я положил его в новом окне:

        this.OpenWindow = window.open('', 'childwindow', 'width=800,height=400,left=150,top=200');
        this.OpenWindow.document.body.innerHTML = "";
        this.OpenWindow.document.body.appendChild(componentRef.location.nativeElement);

Answer 1

Добрый день!

Вы, вероятно, делаете правильные вещи, но:

1. Вам не нужно ng-container, просто удалите его
2. Отметьте данные в качестве входного свойства TransitionPrintComponent (@Input() data;)
3. Вставьте ViewContainerRef в свой компонент, где вы пытаетесь создать экземпляр TransitionPrintComponent. И попробуйте этот фрагмент кода:

const componentFactory = this.resolver.resolveComponentFactory(TransitionPrintComponent);
const componentRef = this.vcr.create(componentFactory);
componentRef.instance.data = relocateDoc;

console.log(componentRef.location.nativeElement);

Вот ссылка, чтобы вы могли получить более подробную информацию: https://angular.io/guide/dynamic-component-loader#resolving -компоненты

Надеюсь, это поможет; )