angular - 门户主机不会在 Material 2 中渲染模板门户

Question

演示插件在这里: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