将 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
Json 对象作为参数传递给 dynamicallay 使用 javascript/angularjs 创建的元素点击事件