如何为 angular material 创建自定义覆盖容器

Question

我已尝试遵循 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)

感谢任何帮助。

Answer 1

丢失了Injectable：

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

另外@angular/cdk 版本由于某种原因与 package.json 中的@angular 版本不匹配。

如何为 angular material 创建自定义覆盖容器

How do I create a custom overlay container for angular material

custom-overlay

angular-material

angular

angular-cdk