需求:
点击组件dashboard的按钮openProtocolMenu(),打开名为child的overlay组件。
同时我们想从dashboard组件传递变量给child组件,来动态显示 overlay 的C组件。
点击child组件上的onClose按钮,可以调用dashboard组件的方法detach()来关闭overlay。
下面这个是dashboard.ts:
// 动态变化的参数:dataToPass
// createInjector(dataToPass: any): PortalInjector {
// const injectionTokens = new WeakMap().set(SvgToken, dataToPass);
// return new PortalInjector(this.injector, injectionTokens);
// }
openProtocolMenu() {
if (this.useOverLay) {
const positionStrategy = this.overlay
.position()
// .flexibleConnectedTo(this.el);
.global()
.left(`${this.leftPixelsToWindow}px`)
.bottom(`${this.bottomPixelsToWindow}px`);
const overlayRef = this.overlay.create({
// 创建 overlay
positionStrategy,
hasBackdrop: true
// backdropClass: 'overlay-class'
});
const injectionTokens = new WeakMap().set(SvgToken, ''); // 传递参数
const userProfilePortal = new ComponentPortal( // 创建 ComponentPortal
ProtocolMenuComponent,
null,
// this.createInjector('assets/icon/downAdd.svg')
new PortalInjector(this.injector, injectionTokens)
);
// console.log('test ', c.instance.pictureSource); // 可以获取到值
const c = overlayRef.attach(userProfilePortal); // 把 ComponentPortal 添加到 overlay 上
overlayRef.backdropClick().subscribe(
() => overlayRef.detach(),
e => console.error(e)
);
c.instance.close.asObservable().subscribe(
() => overlayRef.detach(),
e => console.error(e)
); // 这个close方法在child组件里
}
// subscribe 了记得取消订阅
下面这个是child组件:
@Output() close = new EventEmitter<void>();
onClose() {
this.close.emit();
}
//这样就能在dashboard的c实例里获取到这个方法了。
需求:
多个组件复用同一个overlay的child组件
马克:https://www.cnblogs.com/worktile/p/10559311.html