我的 Typescript AngularJS 1.5 组件有什么问题？

Question

我需要一个自定义 AngularJS 1.5x 组件（在 TypeScript 中！）来输入日期和时间，它将具有一些必需的时区校正逻辑，如下所示：

<date-time value="vm.woComplete.CompleteDate"></date-time>

其中 vm.woComplete.CompleteDate 是我的数据模型的日期属性。

此组件的 TypeScript 代码是这样的：

namespace AppDomain {
    "use strict";

    export class DateTimeComponent {

        require: string = "ngModel";
        bindings: any = { value: "=" };
        template: string = "<input type='date' ng-model='$ctrl.displayValue'><input type='time' ng-model='$ctrl.displayValue'></p>";

        controller: Function = function ($scope) {
            var ctrl = this;

            ctrl.$onInit = function () {
                console.log(arguments);
                ctrl.displayValue = new Date(ctrl.value);
                ctrl.displayValue.setHours(ctrl.displayValue.getHours() - 4);
            }

            $scope.$watch('$ctrl.displayValue', function () {
                var tmpDate = new Date(ctrl.displayValue);
                ctrl.value = tmpDate.setHours(tmpDate.getHours() + 4);
            });
        }

    }

    app.component("dateTime", DateTimeComponent);

}

但是我没有得到任何输出。我做错了什么？

我想要使用 $onInit 和 $onChanges 而不是 $scope.$watch 的正确 TypeScript 代码。

这里是例子，只需要转换成TypeScript即可！

http://plnkr.co/edit/D9Oi6le7G9i3hNC2yvqy?p=preview

Answer 1

你用了我没见过的语法，什么是DetailController？
请尝试使用以下语法：

export class Controller {
    value: number;
    displayValue: Date;

    $onInit() {
        this.displayValue = new Date(this.value);
        this.displayValue.setHours(this.displayValue.getHours() - 4);
    };

    $onChanges() {
        const tmpDate = new Date(this.displayValue);
        this.value = tmpDate.setHours(tmpDate.getHours() + 4);
    };
}
const component : angular.IComponentOptions = {
    controller : Controller,
    bindings: { value: "=" },
    template: `
        <p><label>Date:</label><br>
        <input type='date' ng-model='$ctrl.displayValue'></p>
        <p><label>Time:</label><br>
        <input type='time' ng-model='$ctrl.displayValue'></p>`

};
app.component("dateTime", component);

我的 Typescript AngularJS 1.5 组件有什么问题？

What is wrong with my Typescript AngularJS 1.5 component?

angularjs

typescript

angularjs-components