这怎么能在 Angular 配置 class 的构造函数中未定义？

Question

我在网上找到了一些示例，人们在其中创建 TypeScript 配置 classes 并将它们传递给 Angular。当我尝试它时，我得到了一个奇怪的异常，即 this 未定义。仔细观察发现的其他实现，它们只使用构造函数，那么，这些示例实际上本质上是错误的和误导性的，还是我在定义 class?

时做错了什么？

我的代码：

class TestConfig {
  constructor() {
    console.log('TestThis =>');
    console.log(this);
    console.log('<= TestThis');
  }
}

angular.module('todoList', [])
    .config(TestConfig);

我的日志：

TestThis =>
undefined
<= TestThis

我想定义辅助函数并使用它们，以使构造函数中的配置更易于阅读。我现在正在使用静态辅助函数来做这件事，但我不清楚为什么当它不能正确地与 classes 一起工作时，为什么会有这么多人使用它。但我也看不出我的代码有任何问题。

我从中获得配置 class 想法的原始代码是由 gulp angular generator

顺便说一句生成的

Answer 1

配置函数不是 class，因此不应这样写。 Angular 在没有 new 的情况下调用它们，因此 this 将是 undefined（或者，上帝帮助你，在非严格模式下 window）。

在这里使用 class 没有任何意义，因为没有实例可保留。如果您想利用 $inject，请使用 function/module 对：

function fn($foo) {
}
module fn { export var $inject = ['$foo']; }

或者直接写

fn['$inject'] = ['$foo'];

Answer 2

我最近更新了一个从以前版本的 gulp-angular-generator 生成的项目。我遇到了一些问题，这是其中之一。

我只是导出函数而不是 classes。这样我就知道我不能像 class.

那样使用 this

/* @ngInject */
export function Config(
    $logProvider: ng.ILogProvider,
    $httpProvider: ng.IHttpProvider,
    $provide: ng.auto.IProvideService,
    RestangularProvider: restangular.IProvider) { 

    /* ... */
}

另请注意，我正在使用 ngInject 属性。所以没有必要在任何地方输入 $inject = ['$foo'];。

顺便说一句，我今天发现引用对于确保打字稿文件的正确顺序至关重要。它使用旧的排序方式工作，但现在生成器的做法略有不同，我的所有东西都因为缺少 /// <reference path="..." /> 评论而损坏。

确保您的 index.module.ts 文件顶部有以下内容：

/// <reference path="index.config.ts" /> /// <reference path="index.route.ts" /> /// <reference path="index.run.ts" />

这怎么能在 Angular 配置 class 的构造函数中未定义？

How can this be undefined in the constructor of an Angular config class?

constructor

this

undefined

angularjs

typescript