該refreshTable()函式在父組件中。每當我更新模式中的資訊并關閉它時，我都需要觸發它。
我正在為我的模態使用@ng-bootstrap
對于可能的parent.component.ts
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; constructor( private ngbModal: NgbModal, ) viewModal() { const openModal = this.ngbModal.open(ModalComponent); openModal .componentInstance.id = row.id; } refreshTable() { //refresh code block here }
對于我的 modal.component.ts
import { NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; constructor( private activeModal: NgbActiveModal, ) updateParent() { //update data to database code here this.activeModal.close(); }
關閉模態后如何refreshTable()從 ModalComponent 觸發？由于資料庫中的資料發生了變化，因此當模態關閉時，來自父級的資料不會相應更新。
uj5u.com熱心網友回復：
試著改成這個
const openModal = this.ngbModal.open(ModalComponent);
openModal.componentInstance.id = row.id;
openModal.dismissed.subscribe(
_ => {
this.refreshTable();
}
)
在parent.component.ts
uj5u.com熱心網友回復：
將其作為道具從父組件傳遞給子組件。
使用bind或 箭頭函式來保存該this值。
uj5u.com熱心網友回復：
向模態組件添加輸出事件
@Output() onCLose: EventEmitter<any> = new EventEmitter();
當用戶單擊關閉時，只需呼叫該emit()方法
this.onCLose.emit(value); //value can be whatever you want to pass to the parent
更新您viewModal在父級中的方法以包含對關閉事件的訂閱
viewModal() {
const openModal = this.ngbModal.open(ModalComponent);
openModal.componentInstance.id = row.id;
openModal.componentInstance.onClose.subscribe(value =>
// handle the close event
this.refreshTable();
})
}
您也可以通過任何其他方式實作組件之間的通信：
- 服務
- 狀態管理（ngrx 等）
uj5u.com熱心網友回復：
ngBootstrap 模態有一個beforeDismiss事件，您可以在關閉模態之前添加邏輯。您必須回傳一個真實值才能使模態真正關閉。
你可以這樣做：
const openModal = this.ngbModal.open(ModalComponent, { beforeDismiss: () => this.updateParent() }); // if modal is not closing, your function is returning false.
在此處查看有關該功能的資訊（如果需要，請使用 ctrl F 查找選項）
編輯：@tom-fong 的回答也是一個很好的解決方案，但您必須檢查您是否使用版本 > 8.0.0
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/486462.html
標籤：javascript 有角度的 ng-bootstrap
上一篇：反應地圖-回傳值