1

私はこのガイドに従おうとしました。

私は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)

どんな助けでも大歓迎です。

4

1 に答える 1

1

行方不明でしたInjectable:

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

また、何らかの理由で @angular/cdk バージョンが package.json の @angular バージョンと一致しませんでした。

于 2020-09-01T09:24:12.420 に答える