以下是一个使用自定义注入器和InjectionToken将输入传递给CDK Overlay并使用ComponentPortal的示例:
首先,创建一个InjectionToken来传递输入参数:
import { InjectionToken } from '@angular/core';
export const OVERLAY_DATA = new InjectionToken('overlay-data');
接下来,创建一个自定义注入器来提供输入参数:
import { InjectionToken, Injectable, Injector, Inject, ComponentRef } from '@angular/core';
import { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { OverlayContentComponent } from './overlay-content.component';
import { OVERLAY_DATA } from './overlay-data';
@Injectable()
export class OverlayService {
constructor(private overlay: Overlay, private injector: Injector) { }
openOverlay(data: any): OverlayRef {
// 创建一个OverlayRef
const config = new OverlayConfig({
hasBackdrop: true,
backdropClass: 'cdk-overlay-dark-backdrop',
panelClass: 'custom-overlay-panel',
scrollStrategy: this.overlay.scrollStrategies.block()
});
const overlayRef = this.overlay.create(config);
// 为OverlayRef创建一个Injector
const injectorTokens = new WeakMap([
[OVERLAY_DATA, data]
]);
const injector = Injector.create({ parent: this.injector, providers: [{ provide: OVERLAY_DATA, useValue: data }] });
// 在OverlayRef上附加组件
const portal = new ComponentPortal(OverlayContentComponent, null, injector);
const componentRef: ComponentRef = overlayRef.attach(portal);
return overlayRef;
}
}
在上述代码中,我们首先创建了一个OverlayConfig来配置Overlay的行为。然后,我们使用OverlayService创建一个OverlayRef,并为其创建了一个Injector,以便我们可以将输入数据传递给OverlayContentComponent。最后,我们将OverlayContentComponent附加到OverlayRef上。
最后,创建一个OverlayContentComponent来接收输入数据:
import { Component, Inject } from '@angular/core';
import { OVERLAY_DATA } from './overlay-data';
@Component({
selector: 'app-overlay-content',
template: `
{{ data }}
`,
styles: [`
div {
padding: 16px;
background-color: white;
}
`]
})
export class OverlayContentComponent {
constructor(@Inject(OVERLAY_DATA) public data: any) { }
}
在上述代码中,我们使用@Inject(OVERLAY_DATA)装饰器来注入传递给Overlay的输入数据。
现在,我们可以在组件中使用OverlayService来打开Overlay,并将输入数据传递给OverlayContentComponent:
import { Component } from '@angular/core';
import { OverlayService } from './overlay.service';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
constructor(private overlayService: OverlayService) { }
openOverlay(): void {
const data = 'Hello, World!';
const overlayRef = this.overlayService.openOverlay(data);
}
}
在上述代码中,我们在按钮的点击事件处理程序中调用openOverlay方法,并传递了一个字符串作为输入数据。
这样,当用户点击按钮时,将打开一个Overlay,并在OverlayContentComponent中显示输入数据。
希望这可以帮助到你!