Question

我正在寻找一种在组件上调用函数的方法。这是我的设置，我有一个可重用的组件，它是网格中显示的所有数据的基础，并且包括过滤器逻辑，过滤器芯片，导出和实际网格。到目前为止，所有工作都很好。现在，我有一些实例，用户可以单击一行并编辑一些数据，这些数据通过角材料在对话框窗口中显示。 ll可以正常工作，但是我想做的是在用户进行更改或添加数据后去重新加载网格。我的Base组件具有一个名为onGridRelaod

的函数。

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

所以问题是如何从对话框中调用onGridRelaod？我假设我必须将其公开给使用基本组件的组件，然后在打开它的组件上进行对话框调用。但不是100％知道该怎么做

Answer 1

尝试将事件从子组件发送到父组件。

对话框组件：

lerpColor

父项：

...
onAdd = new EventEmitter();

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

Answer 2

取决于您的页面结构，但是您可以创建提供可观察信号的兄弟服务。您在此可观察状态之内的模式推动会通知“某些更改”。您的组件可以订阅它以重新加载网格。

您可以传递诸如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(...)
  })
}
...

如何从Angular的对话框窗口中的基本组件上调用函数

2 个答案: