Внедрить любой html / компонент внутри компонента, используя угловой 4+

Question

У меня есть всплывающий компонент, и я хочу добавить в него любой пользовательский компонент.В настоящее время я использую [innerHTML], но он не может визуализировать какой-либо пользовательский компонент.Я прочитал это https://angular.io/guide/dynamic-component-loader,, но не смог реализовать это.Поэтому, пожалуйста, предложите.

popup.component.ts

<p-dialog [(visible)]="display" [responsive]="true" [blockScroll]=true (onHide)="onHide($event)" [width]="width" [resizable]="false">
    <p-header>
        <i>{{ title }}</i>
    </p-header>
    <div [innerHtml]="content|sanitizehtml"></div>
    <p-footer>
        <button type="button" pButton icon="pi pi-close" (click)="buttonClick($event)" [label]="noLabel" class="ui-button-secondary"></button>
        <button type="button" pButton icon="pi pi-check" (click)="buttonClick($event)" [label]="yesLabel"></button>
    </p-footer>
  </p-dialog>

app.componet.ts

    openLookup(e){
        this.display = true;
        this.title = 'Product ID';

        this.content = `<p-checkbox [(ngModel)]="someFlag" binary="true" (onChange)="changedRow()"></p-checkbox>
<p-calendar  name="endDate" [(ngModel)]="endDate" [monthNavigator]="true" [yearNavigator]="true" yearRange="1990:3000" [disabledDays]="[0,6]" [showIcon]="true" styleClass="full-width" inputStyleClass="calender-width">

                                    </p-calendar>`;

      }

Answer 1

попытайтесь сохранить всплывающее HTML-содержимое как дочерний компонент

Вы также можете использовать с атрибутом select

Родительский компонент:

<child-component>
    <div sample>Parent Content</div>
</child-component>

Дочерний компонент:

...
<ng-content select="[sample]"></ng-content>
...

Вывод:

...
<div>Parent Content</div>
...

Также вы можете попробовать использовать ng-container