ng2-bootstrap,从父组件调用子组件中定义的模态 [英] ng2-bootstrap, call Modal defined in child component from parent compent
问题描述
我正在将 ng2-bootstrap 用作模态材料.
I am using ng2-bootstrap for the modal stuff.
我正在尝试将模态和其他组件分开.所以我有以下文件:
I am trying to separate my modals and my other components apart. So I have the following files:
addPlaylist.modal.ts
import {Component} from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import {MODAL_DIRECTVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'addplaylist-modal',
directives: [MODAL_DIRECTVES, CORE_DIRECTIVES],
viewProviders: [BS_VIEW_PROVIDERS],
templateUrl: 'app/channel/modals/addPlaylistModal.html'
})
export class AddPlaylistModalComponent {
constructor() {
console.log(this);
}
}
addPlaylistModal.html
<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Large modal</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
在其父组件的html中,我有如下代码段:
In it's parent component's html I have code piece like this:
<a (click)="lgModal.show()"><span class="bigplus pull-right"></span></a>
//some other code
<addplaylist-modal></addplaylist-modal>
这是父组件: channel.component.ts
This is the parent component: channel.component.ts
import { AddPlaylistModalComponent } from './shared/addPlaylist.modal';
@Component({
selector: 'channel',
styleUrls: ['app/channel/channel.css'],
directives: [PlatformsComponent, PagesComponent, PlaylistComponent, VideosComponent, AddPlaylistModalComponent],
providers: [PlatformService],
templateUrl: 'app/channel/channel.html'
})
我想做的是,即使我编写了(click)="lgModal.show()",我也希望能够让父组件访问它并打开模式.在父组件上.
What I want to do, I want to be able to let the parent componet to access it and open the modal even if I write the (click)="lgModal.show()" at parent component.
现在,如果我单击<a (click)="lgModal.show()"><span class="bigplus pull-right"></span></a>
,它将显示无法读取未定义的属性显示"
Now if I click the <a (click)="lgModal.show()"><span class="bigplus pull-right"></span></a>
, it will say " can not read property show of undefined"
因此,如何让父组件知道lgModal已定义且位于其子组件中.
So, how to let the parent component know that the lgModal is defined and it's in its child component.
推荐答案
您的解决方案可能看起来像这样:
Your solution might look something like this:
ChildComponent
@Component({
...
exportAs: 'child' <== add this line
})
export class AddPlaylistModalComponent {
@ViewChild('lgModal') lgModal; <== reference to Modal directive
show(){ <== public method
this.lgModal.show();
}
}
ParentComponent
template: `<a class="btn btn-success" (click)="c.show()">Add</a>
<addplaylist-modal #c="child"></addplaylist-modal>`
另请参阅完整示例 https://plnkr.co/edit/2UAB7lpqqAvchTsLwzr6?p=preview
这篇关于ng2-bootstrap,从父组件调用子组件中定义的模态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!