组件之间共享的角度2模态 [英] Angular 2 modals shared between components
问题描述
我安装了这个模式组件： https://github.com/pleerock/ng2-modal 。
有没有办法在更多组件之间共享相同的模态？
我解释更好。我想要在不同组件中点击不同的按钮打开相同的模态。可能吗？
我尝试过这种方法
https://plnkr.co/edit/RgI1e9PobC7FloLHpEFD?p=preview
但它不是正确的方法，因为它总是添加内容到模态。
我发布在我的app.ts文件下面：
21/12/2016更新
按照@echonax建议，我更新了我的plunk：
//我们的根应用程序组件
import {
NgModule，
ComponentRef，
可注入
组件，
注入器，
ViewContainerRef，
ViewChild，ComponentFactoryResolver}从@ angular / core ;
import {SubjectModule} from'@ angular / platform-browser'
import {Subject} from'rxjs / Subject';
@Injectable（）
导出类SharedService {
showModal：Subject< any> = new Subject（）;
}
@Component（{
selector：'child-component'，
template：`
< button =showDialog（）>从子节点显示模态< / button>
`，
}）
export class ChildComponent {
constructor（private sharedService：SharedService） b
$ b showDialog（）{
this.sharedService.showModal.next（CompComponent）;
}
}
@Component（{
selector：'comp-comp'，
template：`MyComponent `
}）
export class CompComponent {}
@Component（{
selector：'modal-comp'，
template： `
< div class =modal fadeid =theModaltabindex = - 1role =dialogaria-labelledby =theModalLabel>
< div class =modal -dialog largeWidthrole =document>
< div class =modal-content>
< div class =modal-header>
< class =modal-titleid =theModalLabel>标签< / h4>< / div>
< div class =modal-body＃theBody>
< / div> ;
< div class =modal-footer>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal（close）=close （）>关闭< / button>
< / div>< / div>< / div>< / div>
`
}）
export类ModalComponent {
@ViewChild（'theBody'，{read：Vi ewContainerRef}）theBody;
cmp：ComponentRef< any> ;;
cmpRef：ComponentRef< any> ;;;
构造函数（
sharedService：SharedService，
private componentFactoryResolver：ComponentFactoryResolver，
inject：Injector）{
sharedService.showModal.subscribe type => {
if（this.cmp）{
this.cmp.destroy（）;
}
let factory = this.componentFactoryResolver.resolveComponentFactory（type）;
this.cmpRef = this.theBody.createComponent（factory）
$（'＃theModal'）。modal（'show'）;
}）;
}
close（）{
if（this.cmp）{
this.cmp.destroy（）;
}
this.cmp = null;
}
}
@Component（{
selector：'my-app'，
template：`
< div>
< h2> Hello< / h2>
< button（click）=showDialog（）> show modal< / button>
< child-component>< / child -
export class App {
constructor（private sharedService：SharedService）{}
showDialog（）{
this.sharedService.showModal.next（CompComponent）;
}
}
@NgModule（{
imports：[BrowserModule]，
声明：[App，ModalComponent，CompComponent，ChildComponent ]，
providers：[SharedService]，
entryComponents：[CompComponent]，
bootstrap：[App，ModalComponent]
}）
export class AppModule {}
请关注！
这个plunker的原始版本是我的问题：如何动态地创建自举模式作为Angular2组件？
@Günter做了一个惊人的答案，我认为是被低估了。
这个plunker有一个小错误，你可以在这里找到固定版本： https://plnkr.co/edit/oMCZIJq58WdLgYf2D0Di?p=preview
如果案例引用了错误的字段，所以更改
if（this.cmp）{
this.cmp.destroy（）;
}
与
if（this.cmpRef）{
this.cmpRef.destroy（）;
}
I have a typical Angular 2 app with many components.
I installed this modal component: https://github.com/pleerock/ng2-modal.
Is there a way to share the same modals between more components?
I explain better. I would like the same modal should open on click of different buttons inside different components. Is it possible?
I tried this kind of approach https://plnkr.co/edit/RgI1e9PobC7FloLHpEFD?p=preview but it's not the right way, because it always adds content to the modal.
I post it here below my app.ts file:
21/12/2016 update
Following @echonax suggestion, I updated my plunk:
//our root app component
import {
NgModule,
ComponentRef,
Injectable,
Component,
Injector,
ViewContainerRef,
ViewChild, ComponentFactoryResolver} from "@angular/core";
import {BrowserModule} from '@angular/platform-browser'
import {Subject} from 'rxjs/Subject';
@Injectable()
export class SharedService {
showModal:Subject<any> = new Subject();
}
@Component({
selector: 'child-component',
template: `
<button (click)="showDialog()">show modal from child</button>
`,
})
export class ChildComponent {
constructor(private sharedService:SharedService) {}
showDialog() {
this.sharedService.showModal.next(CompComponent);
}
}
@Component({
selector: 'comp-comp',
template: `MyComponent`
})
export class CompComponent { }
@Component({
selector: 'modal-comp',
template: `
<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="theModalLabel">
<div class="modal-dialog largeWidth" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="theModalLabel">The Label</h4></div>
<div class="modal-body" #theBody>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" (close)="close()">Close</button>
</div></div></div></div>
`
})
export class ModalComponent {
@ViewChild('theBody', {read: ViewContainerRef}) theBody;
cmp:ComponentRef<any>;
cmpRef:ComponentRef<any>;
constructor(
sharedService:SharedService,
private componentFactoryResolver: ComponentFactoryResolver,
injector: Injector) {
sharedService.showModal.subscribe(type => {
if(this.cmp) {
this.cmp.destroy();
}
let factory = this.componentFactoryResolver.resolveComponentFactory(type);
this.cmpRef = this.theBody.createComponent(factory)
$('#theModal').modal('show');
});
}
close() {
if(this.cmp) {
this.cmp.destroy();
}
this.cmp = null;
}
}
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello</h2>
<button (click)="showDialog()">show modal</button>
<child-component></child-component>
</div>
`,
})
export class App {
constructor(private sharedService:SharedService) {}
showDialog() {
this.sharedService.showModal.next(CompComponent);
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, ModalComponent, CompComponent, ChildComponent],
providers: [SharedService],
entryComponents: [CompComponent],
bootstrap: [ App, ModalComponent ]
})
export class AppModule{}
Stay tuned!
That plunker's original version is my question actually: How to dynamically create bootstrap modals as Angular2 components?
@Günter made an amazing answer which I think is really underrated.
The plunker has a small mistake, you can find the fixed version here: https://plnkr.co/edit/oMCZIJq58WdLgYf2D0Di?p=preview
The if cases are referencing the wrong field, so change
if(this.cmp) {
this.cmp.destroy();
}
with
if(this.cmpRef) {
this.cmpRef.destroy();
}
这篇关于组件之间共享的角度2模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
