javascript - @ViewChild(CdkPortalOutlet) 在 AfterViewInit 中返回未定义

Question

尝试用ng-templatewith查询CdkPortalOutlet总是不成功，我不明白为什么？

<ng-template CdkPortalOutlet></ng-template>

@ViewChild(CdkPortalOutlet) test: CdkPortalOutlet;

堆栈闪电战

标签： javascriptangularangular-cdk

Answer 1

为了在模板中使用指令CdkPortalOutlet，AppComponent您必须导入（即已声明 AppComponent 的 NgModule）PortalModuleAppModule

import { PortalModule } from '@angular/cdk/portal';
...

@NgModule({
  imports:      [ BrowserModule, FormsModule, PortalModule, OverlayModule ],
                                              ^^^^^^^^^^^^
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

此外，Angular HTML 解析器区分大小写，因此您需要像这样使用它：

<ng-template cdkPortalOutlet></ng-template>
             ^^^
          lower case

分叉的 Stackblitz