Demo Plunker:https://plnkr.co/edit/Ye8MAUmrMEQKnPt93TjT?p=preview
我引用了Material 2文档试图设置一个模板门户,该门户在附近的主机中呈现(实际使用不是那么直接,我想抓住TemplateRef并将其交给另一个组件,但是现在我只想让这个简化版本正常运行。
<ng-template portal #portalEntry>
<p>hello world</p>
</ng-template>
<ng-template [cdkPortalHost]="portalEntry"></ng-template>
基于文档,这个声明性的,仅标记的实现应该有效。但没有任何东西呈现。我做错了什么?
答案 0 :(得分:3)
cdkPortalHost
应该是ComponentPortal
或TemplatePortal
个实例:
我怀疑您希望#portalEntry
成为TemplatePortalDirective
个实例。
@Directive({
selector: '[cdk-portal], [cdkPortal], [portal]',
exportAs: 'cdkPortal',
})
export class TemplatePortalDirective extends TemplatePortal {
constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
super(templateRef, viewContainerRef);
}
}
但它不会起作用,因为在你的情况下portalEntry
是TemplateRef
我看到了几个解决方案:
1)使用exportAs
#portalEntry="cdkPortal"
<强> Plunker Example 强>
2)@ViewChild
@ViewChild(TemplatePortalDirective) portalEntry: TemplatePortalDirective;
<强> Plunker Example 强>