从另一个组件打开 angular Powered bootstrap 模态
Posted
技术标签:
【中文标题】从另一个组件打开 angular Powered bootstrap 模态【英文标题】:Open angular Powered bootstrap modal from another component 【发布时间】:2018-03-09 02:51:05 【问题描述】:我是 Angular 4 的新手。目前我在我的应用程序中使用 agnular powered bootstrap。 (https://ng-bootstrap.github.io/#/components/modal/examples)
现在,我想在从另一个页面单击按钮时打开引导模式。 父页面如下所示:
import Component from '@angular/core';
import NgbdModalBasic from './modal-basic';
@Component(
selector: 'home',
templateUrl: './addYourCargo.component.html',
styleUrls: ['./addYourCargo.component.css'],
)
export class addYourCargo
openModal()
NgbdModalBasic 是模态组件,如下所示
import Component from '@angular/core';
import NgbModal, ModalDismissReasons from '@ng-bootstrap/ng-bootstrap';
@Component(
selector: 'ngbd-modal-basic',
templateUrl: './modal-basic.html',
exportAs: 'child'
)
export class NgbdModalBasic
closeResult: string;
constructor(private modalService: NgbModal)
open(content)
this.modalService.open(content).result.then((result) =>
this.closeResult = `Closed with: $result`;
, (reason) =>
this.closeResult = `Dismissed $this.getDismissReason(reason)`;
);
private getDismissReason(reason: any): string
if (reason === ModalDismissReasons.ESC)
return 'by pressing ESC';
else if (reason === ModalDismissReasons.BACKDROP_CLICK)
return 'by clicking on a backdrop';
else
return `with: $reason`;
和模态 HTML
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
</div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
<hr>
<pre>closeResult</pre>
我已将 Modal 组件包含在主 module.ts 文件中。
我正在单击父组件中的一个按钮,它会触发 openModal 功能。我必须在 Modal 组件中调用 open 函数,以便它可以通过从父组件单击按钮来打开模态。
我该如何继续。在 openModal 函数中应该做什么来打开一个模态。
提前致谢
【问题讨论】:
【参考方案1】:您可以通过调用从其他组件访问的模式上的方法来做到这一点(取决于组件的位置):
<button (click)="modal.openModal()">Open Modal</button>
<your-modal #modal></your-modal>
有关更多信息,请查看 Angular 文档 here
【讨论】:
@BodganC 如何从打开模式功能打开模式。因为现在我可以进入那个功能了。但是有什么方法可以从那里打开一个模态 您可以像在文档演示 here 中那样做,只是您要从另一个组件调用open()
,就像我的回答一样。以上是关于从另一个组件打开 angular Powered bootstrap 模态的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Angular 1.x 服务从另一个组件更新一个组件?