如何在 Angular 8 中创建具有匿名函数的类答案

【问题标题】：How to create a class with annonymous functions in Angular8如何在 Angular 8 中创建具有匿名函数的类
【发布时间】：2019-09-30 08:09:47
【问题描述】：

我正在开发一个 Angular 8 应用程序，需要使用一个库来显示 3D 模型 (JS + WASM)。对于我的树表和 3D 模型之间的交互，我需要在这个库中注册一个观察者。

注册观察者的给定代码示例（对于这个库）是用 AngularJS 编写的：

注册：

$scope.RegisterSelectionObserver = function() {
    if ($scope.selectionObserver == null) {
        $scope.selectionObserver = new $scope.MySelectionClass();
        $scope.session.RegisterSelectionObserver($scope.selectionObserver);
    }
}

类定义：

$scope.MySelectionClass = Module.SelectionEvents.extend("SelectionEvents", {
        __construct: function() {
            this.__parent.__construct.call(this);
            this.SetEventsFilter(Module.EVENTS_PICKS | Module.EVENTS_SELECTION);
        },

        OnSelectionBegin: function () {
            if ($scope.webglSettings.selectionLogging === 'YES') {
                console.log("OnSelectionBegin");
            }
        },
     });

我的收养： 我尝试使用其构造函数创建一个类并将其传递给观察者注册，但出现错误。

我的自定义类：

export class ExtSelectionEvents{
    constructor(){
    }

    OnSelectionBegin(){
        console.log('OnSelectionBegin');
    }
}

我的注册：

const extSelectionEventsInstance = new ExtSelectionEvents();
session.RegisterSelectionObserver(extSelectionEventsInstance);

错误：

zone.js:703 未处理的承诺拒绝：无法传递“[object Object]” 作为一个 SelectionEvents* ；区域：;任务：Promise.then；价值： BindingError {name：“BindingError”，消息：“无法通过”[object Object]" 作为 SelectionEvents*"，堆栈："BindingError：无法通过 "[object Object]" 作为一个 S…erences (http://localhost:4200/scripts.js:181:13)"}消息："不能通过 “[object Object]”作为 SelectionEvents*”名称：“BindingError”堆栈： “BindingError：无法将“[object Object]”作为 SelectionEvents*↵
传递在 BindingError。 (http://localhost:4200/assets/js/libthingview_wasm.js:1:117337)↵
在新的 BindingError (eval at createNamedFunction (http://localhost:4200/assets/js/libthingview_wasm.js:1:116224), :4:34)↵ 在 throwBindingError (http://localhost:4200/assets/js/libthingview_wasm.js:1:118918)↵ 在 RegisteredPointer.nonConstNoSmartPtrRawPointerToWireType [as toWireType] (http://localhost:4200/assets/js/libthingview_wasm.js:1:134368)↵ 在 Session$RegisterSelectionObserver [作为 RegisterSelectionObserver] (eval 在新_ (http://localhost:4200/assets/js/libthingview_wasm.js:1:142970), :8:26)↵ 在 OverviewComponent.push../src/app/views/mechportal/overview/overview.component.ts.OverviewComponent.callback (http://localhost:4200/views-mechportal-overview-overview-module.js:18109:17)↵ 在http://localhost:4200/scripts.js:18:31↵ http://localhost:4200/scripts.js:182:17↵ 在 _loadPreferences (http://localhost:4200/scripts.js:304:9)↵ 在 Object.LoadPreferences (http://localhost:4200/scripts.js:181:13)"原型：错误 BindingError：无法将“[object Object]”作为 SelectionEvents* 传递在 BindingError。 (http://localhost:4200/assets/js/libthingview_wasm.js:1:117337) 在新的 BindingError 处（在 createNamedFunction 处进行评估（http://localhost:4200/assets/js/libthingview_wasm.js:1:116224）， :4:34)

总结：

库期待 OnSelectionBegin 的匿名函数，因为它正在创建它的命名函数。

MySelectionClass 中发生了什么，如何翻译 AngularJS 类定义及其匿名函数以与 Angular 8/库一起使用？

【问题讨论】：

标签： angular anonymous-function anonymous-class

【解决方案1】：

不确定，但你应该处理 JS 类：

export class ExtSelectionEvents extends SelectionEvents{
    constructor() {
      super();
    }

    OnSelectionBegin(){
        console.log('OnSelectionBegin');
    }
}

【讨论】：

不幸的是，当我尝试扩展选择事件时，我得到了一个 ReferenceError: SelectionEvents is not defined。
@BenjaminSteiner 你应该找到它的来源，因为在 AJS 中，它们是从它扩展而来的。
感谢您对 SelectionEvents 扩展的提示。让它与 SelectionEvents 的扩展一起工作。此类仅在全局范围内可用。所以我将它声明为 Module 并可以像这样初始化类： const MyEventsClass = Module.SelectionEvents.extend("SelectionEvents", { __construct: function () { this.__parent.__construct.call(this); this.SetEventsFilter(Module .EVENTS_PICKS | Module.EVENTS_SELECTION); }, OnSelectionBegin: function () { console.log("OnSelectionBegin"); } });
没问题，很高兴能帮上忙！

【解决方案2】：

SelectionEvents 类是缺少的和平。

在对 Module 进行全局声明（声明 var Module: any）之后，我终于可以扩展 SelectionEvents 类并实现我的方法了。

Angular 和 AngularJS 实现之间的唯一区别是作用域不同。在 AngularJS 中，它被绑定到控制器的范围内，现在它在全局范围内。

   const MyEventsClass = Module.SelectionEvents.extend("SelectionEvents", {

  __construct: function () {
    this.__parent.__construct.call(this);
    this.SetEventsFilter(Module.EVENTS_PICKS | Module.EVENTS_SELECTION);
  },

  OnSelectionBegin: function () {
      console.log("OnSelectionBegin");
      console.dir(this);
  }
});

session.RegisterSelectionObserver(new MyEventsClass());

【讨论】：