Question

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>

基于文档，这个声明性的，仅标记的实现应该有效。但没有任何东西呈现。我做错了什么？

Answer 1

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

门户主机在物料2

1 个答案: