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

时间:2016-12-28 16:40:55

标签: angularjs angularjs-components

我正在使用带角度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片段:

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

1 个答案:

答案 0 :(得分:0)

我遇到了类似的问题,我的解决方法是将$ 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';
        }  
      }
    }