如何为角形材料创建自定义覆盖容器

问题描述

我尝试遵守this指南。

我有一个OverlayContainer子类

import { OverlayContainer } from '@angular/cdk/overlay';

export class CdkOverlayContainer extends OverlayContainer {
  /**
  * Set the container element from the outside,e.g. from the corresponding directive
  */
  public setContainerElement(element: HTMLElement): void {
    this._containerElement = element;
  }
  /**
   * Prevent creation of the HTML element
   */
  protected _createContainer(): void {
    return;
  }
  
}

然后我有一条指令：

import { Directive,ElementRef,Renderer2 } from '@angular/core';
import { CdkOverlayContainer } from './CdkOverlayContainer';
import {OverlayContainer} from '@angular/cdk/overlay';

@Directive({
    selector: '[myCdkOverlayContainer]'
})
export class CdkOverlayContainerDirective {

    constructor(protected renderer: Renderer2,protected elementReference: ElementRef,protected cdkOverlayContainer: OverlayContainer) {
       
        this.renderer.addClass(this.elementReference.nativeElement,'cdk-overlay-container');
        (<any>this.cdkOverlayContainer).setContainerElement(this.elementReference.nativeElement);
    }
}

app.module.ts

    { provide: OverlayContainer,useClass: CdkOverlayContainer },

然后我用该指令添加一个div

<div myCdkOverlayContainer>
  ...
</div>

出现以下错误：

main.ts:14 TypeError: this.cdkOverlayContainer.setContainerElement is not a function
    at new CdkOverlayContainerDirective (CdkOverlayContainerDirective.ts:13)
    at NodeInjectorFactory.CdkOverlayContainerDirective_Factory [as factory] (CdkOverlayContainerDirective.ts:14)

感谢您的帮助。

解决方法

缺少Injectable：

@Injectable({providedIn: 'root'})
export class CdkOverlayContainer extends OverlayContainer {
...

由于某些原因，@ angular / cdk版本也与package.json中的@angular版本不匹配。