门户主机在物料2

时间:2017-05-01 16:53:13

标签: angular angular-material

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>

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

1 个答案:

答案 0 :(得分:3)

cdkPortalHost应该是ComponentPortalTemplatePortal个实例:

我怀疑您希望#portalEntry成为TemplatePortalDirective个实例。

@Directive({
  selector: '[cdk-portal], [cdkPortal], [portal]',
  exportAs: 'cdkPortal',
})
export class TemplatePortalDirective extends TemplatePortal {
  constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
    super(templateRef, viewContainerRef);
  }
}

但它不会起作用,因为在你的情况下portalEntryTemplateRef

我看到了几个解决方案:

1)使用exportAs

#portalEntry="cdkPortal"

<强> Plunker Example

2)@ViewChild

@ViewChild(TemplatePortalDirective) portalEntry: TemplatePortalDirective;

<强> Plunker Example