Angular 1.5-Komponente in Typescript übergeben Binding variable Zeichenfolge

Question

Ich verwende Typoskript mit eckigen 1.5. Ich habe ein Problem bei der Übergabe einer Variablen an eine Komponente an eine Bindung.

Hier ist der relevante Code - ich habe den meisten nicht relevanten Code entfernt.

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'; 
    } 
} 

}

und hier ist der HTML-Schnipsel:

immer charttype nicht definiert ist. Jede Hilfe wird geschätzt.

Answer 1

Ich hatte ein ähnliches Problem, und meine Lösung bestand darin, einen $ Scope-Dienst in die Controller-Klasse zu injizieren. Der $ scope enthält einen Controller, der standardmäßig $ ctrl heißt, und innerhalb von $ ctrl können Sie Ihre Bindungen finden. Also, für Ihren Fall wäre eine Lösung wie diese

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'; 
     } 
     } 
    }