Angular 组件：扩展类的实例似乎被覆盖答案

【问题标题】：Angular components: instance of extended class seems to get overwrittenAngular 组件：扩展类的实例似乎被覆盖
【发布时间】：2020-02-24 15:59:14
【问题描述】：

在我的 angular 8 项目中，我有一个类（只是一个类，没有作为组件实现），它提供了一些默认配置和方法。

这个类被多个组件扩展。如果同一视图上的多个组件（即同时存在）扩展该类，它们的实例似乎会相互覆盖。如果我在其中一个组件中覆盖了一个属性或方法，之后又实例化了另一个组件，那么覆盖就消失了。

我不知道为什么会这样。扩展类的构造函数被多次调用，所以理论上每个扩展类都应该创建自己的实例。

更新

我在 StackBlitz 演示中重现了这个问题：https://stackblitz.com/edit/angular-hw1cv9

ListComponent 和 PopupComponent 都扩展了 DataGridComponent。在 ListComponent 中，我在模板中启用了导出功能，并且始终有效。我还覆盖了 onExporting 事件处理程序。如果您注释掉弹出窗口（或使用 *ngIf="popupVisible" 阻止它创建），此覆盖工作正常，但它会在弹出窗口原样恢复到其原始功能。

（我不知道如何在演示中显示 devextreme 图标，抱歉。导出按钮在表格的左侧）。

用解决方案更新了演示

【问题讨论】：

能否提供一些代码示例，最好是demo
我添加了一个演示。

标签： javascript angular typescript devextreme devextreme-angular

【解决方案1】：

您正在设置 DataGrid 对象本身的 defaultOptions。任何继承您的组件或从其他地方导入 DataGrid 的类都将是您在 DataGridComponents 构造函数中设置的配置。

您确定要直接将 defaultOptions 分配给 DataGrid 对象吗？

【讨论】：

解决了！太感谢了！我永远不会想到这可能是问题所在，因为我不明白为什么这会使网格的 ViewChild 无效（它也这样做了）。我将选项移动到 ngAfterViewInit 并将它们直接应用于网格实例，现在它可以工作了。