Can't instantiate UI5 classes due to "TypeError: ... is not a constructor"

Question

我正在尝试重构旧版 UI5 代码库，并希望使用可重复使用的对话框。

我的步数：

我已经下载了 Walkthrough Step 19: Reuse Dialogs 示例
我已将 HelloDialog.js 添加到项目的 ./controller/ 文件夹中
我已将 HelloDialog.fragment.xml 添加到项目的 ./view/ 文件夹中
我已经将 HelloDialog.js 和 HelloDialog.fragment.xml 中的命名空间从 sap.ui.demo.walkthrough.controller.HelloDialog 调整为 webapp.controller.HelloDialog
我已经为 HelloDialog 添加了一个按钮到视图：

<Button id = "helloDialogButton"
        icon = "sap-icon://world"
        text = "Show Popup"
        press = ".onOpenDialog" />

我已经添加到 App.controller.js:

onOpenDialog() {
    this.getOwnerComponent().openHelloDialog();
},

我已将 "./controller/HelloDialog" 添加到 Component.js 并初始化对象：

init(...args) {
    UIComponent.prototype.init.apply(this, args);
    this.getRouter().initialize();
    this._helloDialog = new HelloDialog(this.getRootControl());
}

我已将 exit 和 openHelloDialog 事件的挂钩添加到 Component.js:

exit() {
    this._helloDialog.destroy();
    delete this._helloDialog;
},

openHelloDialog() {
    this._helloDialog.open();
},

现在，我运行项目并得到一个空白页面，在 DevTools 控制台中我看到以下错误：

Failed to load component for container rootComponentContainer. Reason: TypeError: HelloDialog is not a constructor

我能发现的唯一区别是 我在我的代码中使用了箭头函数，但是箭头函数会不会破坏 UI5？也许，对象上下文存在一些问题。

Answer 1

UI5 classes 的构造函数应该避免箭头函数：

<del>// 构造函数：() => {}</del>
构造函数：<strong>function</strong>() { // 例如在 HelloDialog.js
  // 避免在 UI5 class 构造函数中使用箭头函数
},

这同样适用于 VanillaJS 中的构造函数。在箭头函数上调用 new 是 not supported!

另请注意，箭头函数也不会创建自己的上下文 (this)。在这种情况下，它们的上下文基于 scope，箭头函数的定义通常是 window。因此，如果函数体依赖于 this.

，则不应使用箭头表达式定义方法。

Can't instantiate UI5 classes due to "TypeError: ... is not a constructor"

Can't instantiate UI5 classes due to "TypeError: ... is not a constructor"

javascript

sapui5