将 AngularJS 对象作为 TypeScript 类注入(缺少方法)

Posted

技术标签:

【中文标题】将 AngularJS 对象作为 TypeScript 类注入(缺少方法)【英文标题】:Inject AngularJS object as TypeScript class (methods missing) 【发布时间】:2015-03-26 16:27:33 【问题描述】:

Angular 从服务中获取一些 JSON 作为路由解析的一部分。

JSON 作为 Angular-ish 反序列化对象注入到控制器中。

对象的属性与提供的 TypeScript 类对齐,所以例如vm.foo.displayName 成功显示在 html 页面上。

但是我认为TypeScript类中定义的方法无处可寻,所以当我尝试调用vm.foo.run()时,控制台打印错误:TypeError: Object doesn't support property or method 'run '

module app.Samples 

    export class Foo 
        public typeName: string;
        public displayName: string;

        public run(): void 
            alert("Running!");
        
    


module app.Samples 

     interface IFoobarScope 
         foo: Foo;
     

     class FoobarController implements IFoobarScope 
         foo: Foo;

         static $inject = ['foo'];
         constructor(foo: Foo) 
             var vm = this;
             vm.foo = foo;
             vm.foo.run();
         
     

     angular
         .module('app.Samples')
         .controller('app.Samples.FoobarController', FoobarController);
 

【问题讨论】:

【参考方案1】:

是的,就 AngularJS 而言,它只是将任何旧对象传递给您的控制器函数。 TypeScript 为您的代码中的 Foo 类提供了语法糖,但如果对象没有 run() 方法,它不会给它一个方法。

您可以为您的 Foo 类型创建一个复制构造函数:

constructor(foo?: Foo) 
    if(foo) 
        this.typeName = foo.typeName;
        this.displayName = foo.displayName;
    

然后在您的控制器中执行此操作:

constructor(foo: Foo) 
    var vm = this;
    vm.foo = new Foo(foo);
    vm.foo.run();

或者,您可以跳过复制构造方法并使用angular.extend()

constructor(foo: Foo) 
    var vm = this;
    vm.foo = new Foo();
    angular.extend(vm.foo, foo);
    vm.foo.run();

【讨论】:

这就是我的怀疑,但您的解决方案/您所说的方式使灯泡熄灭。无需手动将注入的对象反射到构造的对象。如果您可以从vm.foo = new Foo(foo); 编辑到vm.foo = new Foo(); angular.extend(vm.foo, foo);,我会标记为答案 :-) 很好的 angular.extend 和/或 angular.copy 概要:***.com/questions/16797659/… @RJB 我最初发布的方法可能有一些优点,所以我编辑了我的答案以另外包含您的建议。

以上是关于将 AngularJS 对象作为 TypeScript 类注入(缺少方法)的主要内容,如果未能解决你的问题,请参考以下文章

在 Angularjs 中 ui-sref 和 $state.go 如何传递单个多个参数和将对象作为参数

[AngularJS] AngularJS系列 中级篇之ngResource

通过数组的AngularJS 1.6返回对象数据

Json 对象作为参数传递给 dynamicallay 使用 javascript/angularjs 创建的元素点击事件

将 json 对象从 jquery 发送到 angularjs 并使用 ng-repeat

typescri枚举enum