我如何在 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(...)
  })
}
...