我如何在 Angular 中的對話框 window 中調用基本組件上的 function

Question

我正在尋找一種在組件上調用 function 的方法。 這是我的設置，我有一個可重復使用的組件，它是網格中顯示的所有數據的基礎，包括過濾器邏輯、過濾器芯片、導出和實際網格。 到目前為止，所有這些都很好。 現在我有一些實例，用戶可以單擊一行並編輯一些數據，這些數據通過 angular 材料顯示在對話框 window 中。 ll 工作正常，但我想做的是 go 並在用戶進行更改或添加數據后重新加載網格。 我的 Base 組件有一個名為 onGridRelaod 的 function

 onGridReload($event: IGridReloadPayload) {
        this.setDataFetcherFactory($event.currentDataFetcherParams);
        this.agGridBase.setDataSource(() => {
        });
    }

所以問題是我如何從我的對話框中調用 onGridRelaod？ 我假設我必須將它暴露給使用基本組件的組件，然后讓對話框在打開它的組件上調用它。 但不是 100% 確定如何 go 關於它

Answer 1

嘗試將事件從子組件發送到父組件。

對話框組件：

...
onAdd = new EventEmitter();

onButtonClick() {
  this.onAdd.emit();
}
...

父組件：

...
let dialogRef = this.dialog.open(Component);
const sub = dialogRef.componentInstance.onAdd.subscribe(() => {
  // do something
});
dialogRef.afterClosed().subscribe(() => {
  // unsubscribe onAdd
});
...

Answer 2

根據您的頁面結構，但您可以創建提供信號 Observable 的同級服務。 您的模態推入此可觀察對象以通知“某些變化”。 您的組件可以訂閱它以重新加載網格。

您可以傳遞諸如 rowId 之類的信息以進行部分重新加載以加快重新加載速度。

服務

@Injectable()
export class MyTableService {
  public change: EventEmitter<void> = new EventEmitter();
}

你的模態

...
public onClose() {
  this.myTableService.change.next();
}
...

你的組件

...
public ngOnInit() {
  this.myTableService.change.subscribe(() => {
    this.onGridReload(...)
  })
}
...