如何解决如何为角形材料创建自定义覆盖容器
我尝试遵守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版本不匹配。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。