Typescript中的Angular 1.5组件未传递绑定变量字符串答案

【问题标题】：Angular 1.5 component in Typescript not passing binding variable stringTypescript中的Angular 1.5组件未传递绑定变量字符串
【发布时间】：2016-12-28 16:40:55
【问题描述】：

我正在使用 Angular 1.5 的 Typescript。我在将变量传递给组件以绑定时遇到问题。

这里是相关代码——我已经去掉了大部分不相关的代码。

module xyz.dashboard {

class PatientPhaseCountController {

    public static $inject = [];

    public title: string;

    public chartType: string;

    ///// /* @ngInject */
    constructor() {
        this.title = 'Patient Phase Count';

        console.log(this.chartType);
        this.$onInit();
    }

    public $onInit(): void {
        console.log(this);
    };

}

class PatientPhaseCount implements ng.IComponentOptions {
    public bindings: any;
    public controller: any;
    public templateUrl: string;

    constructor() {
        this.bindings = {
            chartType: '@'
        };
        this.controller = PatientPhaseCountController;
        this.templateUrl = 'app/dashboard/patientPhaseCount/patientPhaseCount.component.html';
    }
}

}

这是 html sn-p:

chartType 始终未定义。任何帮助表示赞赏。

【问题讨论】：

标签： angularjs angularjs-components

【解决方案1】：

我遇到了类似的问题，我的解决方案是将 $scope 服务注入控制器类。 $scope 包含一个控制器，默认情况下称为 $ctrl，在 $ctrl 中您可以找到您的绑定。因此，对于您的情况，解决方案将是这样的

    module xyz.dashboard {
      class PatientPhaseCountController {
         public static $inject = [];
         public title: string;
         public chartType: string;
         ///// /* @ngInject */
         constructor(private $scope:any) {
           this.title = 'Patient Phase Count';
           console.log(this.$scope.$ctrl.chartType);
           this.$onInit();
         }
         public $onInit(): void {
           console.log(this);
         };
       }

        class PatientPhaseCount implements ng.IComponentOptions {
        public bindings: any;
        public controller: any;
        public templateUrl: string;
        constructor() {
            this.bindings = {
                chartType: '@'
            };
            this.controller = ["$scope",($scope:any)=>{
               return new PatientPhaseCountController($scope);
            };
            this.templateUrl = 'app/dashboard/patientPhaseCount/patientPhaseCount.component.html';
        }  
      }
    }

【讨论】：