angular6 - 使用模型向组件发送数据
问题描述
嗨,我正在使用带有 ng-boostrap 的 Angular 6。如何在打开 PopUP 时向组件发送数据?这实际上是在弹出窗口中弹出。
调用堆叠模型
https://ng-bootstrap.github.io/#/components/modal/examples
popUPOrders() {
this.modalService.open(OrdersComponent, {
size: 'lg'
});
打开 POPUP 的唯一方法是使用 modelSerivce.open 并且没有附加数据的字段。
解决方案
要传递的数据需要是内容组件上的输入属性。在您的情况下,为 OrdersComponent 组件添加输入属性。
链接: https
:
//ng-bootstrap.github.io/#/components/modal/examples Bootstrap 站点示例(组件作为内容):
import { Component, Input } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-modal-content',
template: `
<div class="modal-header">
<h4 class="modal-title">Hi there!</h4>
<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Hello, {{name}}!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
</div>
`
})
export class NgbdModalContent {
@Input() name;
constructor(public activeModal: NgbActiveModal) {}
}
@Component({
selector: 'ngbd-modal-component',
templateUrl: './modal-component.html'
})
export class NgbdModalComponent {
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.name = 'World';
}
}
推荐阅读
- linux - 如何将迭代循环列表转换为字符串以在 Linux 中使用
- python - 如何用字典中的数字替换熊猫列中句子中的所有单词,然后对它们求和?
- php - 什么可以用来代替 window.location.replace 以避免页面重新加载?
- reactjs - 如何一次使用 onclick 和 push state 到 props ?我有推送是 undef 错误
- android - 如何从资源中设置改造 URL 字符串
- python - 如何将 python ndarray 转换为 c++ char*?
- ios - 在 App Center 和 App Insights 中设置使用情况分析
- django - 如何使用 /download/ 扩展我的端点?
- amp-html - 如何在 amphtml 的过滤下拉列表中对结果进行排序?
- c++ - 如何在 C++ 中以编程方式显示 macOS 上所有正在运行的进程?