Open keyiis opened 8 years ago
@keyiis 有解决方案吗?
@WingGao 木有,目前还没有找到一款能在angular2使用满意的模态框组件。
模态框应该是组件,不应该做成服务吧。如果非要这样做,完全可以在服务中,写js操作dom的代码。
@hstarorg 模态框当然是组件,但用服务的方式调用会更灵活。
@keyiis 模态框核心是内容,如果服务并不好使用。 如果是提示框,确认框,我觉得用service倒是不错的。
@hstarorg 我就是用模态框去实现提示框和确认框的哦
@keyiis 这个写一个 directive 而不是 service 来处理,可以参照 material2 portal
@keyiis 差不多的方法。
import { Injectable, ApplicationRef, Type, ComponentRef, ComponentFactory, Injector, ViewContainerRef,
Component, ComponentFactoryResolver} from '@angular/core';
@Injectable() export class ModalService {
private _componentRef: ComponentRef
public result: Promise
private _resolve:
constructor(private _applicationRef: ApplicationRef, private _injector: Injector, private _componentFactoryResolver: ComponentFactoryResolver) { this.result = new Promise((resolve, reject) => { this._resolve = resolve; this._reject = reject; });
}
open
close
dismiss
}
2. 自定义模态框组件 DetailModalComponent
3. some.component 里调用
```typescript
constructor(private deploy: DeployService,
private L: LogService,
private modalService: ModalService,
private componentFactoryResolver: ComponentFactoryResolver) {}
onShowMore(project, index) {
const modalRef = this.modalService.open<DetailModalComponent>(DetailModalComponent);
modalRef.instance.noHeader = true;
this.modalService.result
.then(data => {
console.log('DetailModalComponent close', data);
})
.catch(error => {
console.error('DetailModalComponent dismiss', error);
});
}
起因这样的,我想用service实现一个模态框(基于bootstrap modal),在任何一个组件中都可以通过调用这个service去弹出或隐藏模态框,那么就需要在service中将modal.component动态加载到根组件下一级,当模态框被关闭时这个组件自动销毁,在下次需要时再动态加载进来,我使用的是resolveComponent,但每次这个模态框都被加载到body标签下,也就是说和根组件平级,不知道问题出在哪,下面是相关的一些代码,懂行的指点一下,先谢过了! 1、在根组件中获得ViewContainerRef便于sevice中引用到
2、在需要调用模态框的组件中调用modal.service
3、modal.service中动态加载模态框组件