Netanet Basal 的博客中有两篇关于使用 CDK 的 OverLay 的精彩文章
- Creating Powerful Components with Angular CDK
- Context Menus Made Easy with Angular CDK
我尝试简单化this stackblitz
基本上你有一个注入 Overlay 的服务
constructor(private overlay: Overlay) { }
要打开一个模板，你需要传递源（我称他为“origin”）、模板（我称之为菜单）和组件的 viewContainerRef
this.overlayRef = this.overlay.create(
this.getOverlayConfig({ origin: origin})
);
//I can pass "data" as implicit and "close" to close the menu
this.overlayRef.attach(new TemplatePortal(menu, viewContainerRef, {
$implicit: data, close:this.close
}));
getOverLayConfig 返回一个类似的配置
private getOverlayConfig({ origin}): OverlayConfig {
return new OverlayConfig({
hasBackdrop: false,
backdropClass: "popover-backdrop",
positionStrategy: this.getOverlayPosition(origin),
scrollStrategy: this.overlay.scrollStrategies.close()
});
}
职位策略是您要附加模板的位置 - 一个包含您首选职位的数组，例如
[
{
originX: "center",
originY: "bottom",
overlayX: "center",
overlayY: "top"
},
]
好吧，代码的另一部分是关于关闭模板元素的。我选择在服务中创建一个打开的函数
1.-附加元素
2.-创建订阅
this.sub = fromEvent<MouseEvent>(document, "click")
3.-返回一个返回 null 的 observable 或你在函数中传递的参数 "close"(*)
注意：不要忘记包含在您的 css 中 ~@angular/cdk/overlay-prebuilt.css
(*) 这允许我像模板一样
<ng-template #tpl let-close="close" let-data>
<div class="popover" >
<h5>{{name}} {{data.data}}</h5> //<--name is a variable of component
//data.data a variable you can pass
And here's some amazing content. It's very engaging. Right?
<div>
<a (click)="close('uno')">Close</a> //<--this close and return 'uno'
</div>
</div>
</ng-template>
更新如果我们想先附加一个组件，我们需要记住它必须在模块的 entryComponents 中
@NgModule({
imports: [ BrowserModule, FormsModule,OverlayModule ],
declarations: [ AppComponent,HelloComponent], //<--HERE
bootstrap: [ AppComponent ],
entryComponents:[HelloComponent] //<--and HERE
})
嗯，附加组件很简单，更改附加并使用 ComponentPortal，例如
const ref=this.overlayRef.attach(new ComponentPortal(HelloComponent,viewContainerRef))
那么，如果我们的组件有一些输入，例如
@Input() name="Angular";
@Input() obj={count:0};
我们可以使用 ref.instance 来访问组件，例如
ref.instance.name="New Name"
但是由于我们要维护服务最一般的用途，我想使用参数“data”给变量赋值，所以我们的函数“open”变成了
open(origin: any, component: any, viewContainerRef: ViewContainerRef, data: any) {
this.close(null);
this.overlayRef = this.overlay.create(
this.getOverlayConfig({ origin: origin})
);
const ref=this.overlayRef.attach(new ComponentPortal(component, viewContainerRef));
for (let key in data) //here pass all the data to our component
{
ref.instance[key]=data[key]
}
...rest of code...
}
和往常一样，如果我们传递一个对象，组件中的所有更改都会改变对象的属性，因此在我们的主组件中可以做出一些喜欢
obj={count:2}
open(origin:any,menu:any,index:number)
{
this.popupService.open(origin,HelloComponent,this.viewContainerRef,
{name:'new Name'+index,obj:this.obj})
.subscribe(res=>{
console.log(res)
})
}
看到，当我将对象作为 obj 传递时，组件中的任何更改都会更改对象的属性，在我的情况下，组件非常简单
@Component({
selector: 'component',
template:`Hello {{name}}
<button (click)="obj.count=obj.count+1">click</button>
`
})
export class HelloComponent {
@Input() name="Angular";
@Input() obj={count:0};
}
你可以在new stackblitz看到
Update2 要从 HelloComponent 关闭面板，我们需要将服务作为公共注入并使用 close。或多或少，一个按钮
<button (click)="popupService.close(4)">close</button>
注入服务的位置
constructor(public popupService: MenuContextualService){}