如何在角度 4 中使用 ng-bootstrap 将数据模态组件传递给父组件

Posted

技术标签:

【中文标题】如何在角度 4 中使用 ng-bootstrap 将数据模态组件传递给父组件【英文标题】:How to pass data modal Component to parent Component using ng-bootstrap in angular 4 【发布时间】:2018-02-14 23:35:04 【问题描述】:

我尝试在下面的代码中将数据从模态组件传递到父组件。

package.json

"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3"

app.component.html

<button class="btn btn-primary" (click)="openModal()">Open</button>

app.component.ts

import  NgbModal, NgbActiveModal  from '@ng-bootstrap/ng-bootstrap';

export class AppComponent 

   constructor(private modalService: NgbModal)  

    openModal() 
        const modalRef = this.modalService.open(AppModalComponent);
    

app-modal.component.html

<h1>data</h1>
<button class="btn btn-primary" (click)="addMe()"></button>

app-modal.component.ts

import  Component, Output, EventEmitter  from '@angular/core';

export class AppModalComponent 
    private data: string;
    @Output emitService = new EventEmitter();

    constructor() 
        this.data = "hello world";
    

    addMe() 
        this.emitService.next(this.data)
    

emit之后,如何获取父组件(app.component)的数据??

【问题讨论】:

【参考方案1】:

您可以像这样订阅emitService @Output

openModal() 
     const modalRef = this.modalService.open(AppModalComponent);
     modalRef.componentInstance.emitService.subscribe((emmitedValue) => 
         // do sth with emmitedValue
     );

虽然上述方法可行,但请注意,使用要返回的值关闭模式通常更容易。这将解决modalRef 上可用的承诺。更多详情https://***.com/a/43614501/1418796

【讨论】:

谢谢,这正是我需要解决的问题。

以上是关于如何在角度 4 中使用 ng-bootstrap 将数据模态组件传递给父组件的主要内容,如果未能解决你的问题,请参考以下文章

如何在自定义操作中打开和隐藏 ng-bootstrap datepicker?

更改 ng-bootstrap UI 中的模态大小(角度 2)

如何使用 angular-cli 和 ng-bootstrap 自定义 Bootstrap 4 SCSS 变量?

依赖@ng-bootstrap/ng-bootstrap 必须明确列入白名单

使用 npm 让 ng-bootstrap 为 angular cli 项目工作

如何在 ng-bootstrap 轮播中用 div 替换图像?