[英]Inject any html/ component inside a component using angular 4+
我有一个弹出组件,我想向其中注入任何自定义组件。 目前,我正在使用[innerHTML],但无法呈现任何自定义组件。 我阅读了https://angular.io/guide/dynamic-component-loader ,但是无法使用它来实现。 所以请提出建议。
<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>`;
}
尝试将弹出html内容维护为子组件
您还可以与select属性一起使用
父组件:
<child-component>
<div sample>Parent Content</div>
</child-component>
子组件:
...
<ng-content select="[sample]"></ng-content>
...
输出:
...
<div>Parent Content</div>
...
您也可以尝试使用ng-container
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.