Question

我在TypeScript 2.0.6中使用angularjs 1.5.8。请考虑以下tsconfig.json和angular component：

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  }
}

和组件：

var app = angular.module('App', []);
class testComponent {
    public message: string = "worked!";
}
app.component('ctrl', {
    bindings: {
        message: '<'
    },
    template: '<div>Hello {{vm.message}}</div>',
    controller: testComponent,
    controllerAs: "vm"
});

它工作正常，直到我将目标更改为“es6”，并且它无法按预期工作，我在不更改代码的情况下实现了两种不同的结果。在es6中，“message”属性将为null。

以下代码适用于两种配置：

app.component('ctrl', {
    bindings: {
        message: '<'
    },
    template: '<div>Hello {{vm.message}}</div>',
    controller: function () {
        this.message = 'test';
    },
    controllerAs: "vm"
});

这里出了什么问题？

Answer 1

简而言之，当使用构造函数实例化指令控制器时，Angular用于在调用构造函数之前在控制器实例上预先指定指令绑定（魔术！）我们应该使用$ onInit而不是像这样的构造函数

Button

Angular 1.5.8组件与typescript（ecma6）和（ecma5）配置的工作方式不同

1 个答案: