角度1.5とTypescriptを使用してコンポーネントコントローラでバインディング値を取得する方法はありますか？

Question

私はバインドを介して取得する文字列に応じて異なるメニュー構造を表示する左手のメニューコンポーネントを作成したいと思います。例えば

：

<left-hand-menu-component module='abc'></left-hand-menu-component> 

そして、それが唯一のABCモジュールのメニュー構造を示しています。これを達成するためには、コンポーネントコントローラがデータとの連携が可能でなければならず、必要なサービスコールを行う必要があります。

私はしばらくの間、これを達成するためにグーグルで行っており、私はthisとthis投稿とthis投稿を見つけました。 Angularのドキュメントで利用できる例はあまりにも単純です。

私は上記の例のコードをまとめてあり、コントローラーが値渡しのバインディングを処理できるときにその部分が欠落しています。

でも可能ですか？それとも、コンポーネントよりもむしろディレクティブですか？

表示されている場所、ブログエントリ、またはソースなどの例をご存知ですか？

コントローラコンストラクタの2つのconsole.logは、結果として「undefined」を書き出します。

コンポーネント：

module qa.gonogo { 
    "use strict"; 

    export class LeftHandMenuComponent implements ng.IComponentOptions { 


     public transclude: boolean = false; 
     public controller: Function = LeftHandMenuComponentController; 
     public controllerAs: string = "vm"; 
     public templateUrl: string = "app/content/lefthandmenu/leftHandMenuComponentTemplate.html"; 
     public bindings: any; 

     constructor() { 
      this.bindings = { 
       module: '<' 
      } 
     } 
    } 

    angular 
     .module("goNoGo") 
     .component("gonogoLefthandmenuComponent", new LeftHandMenuComponent()); 

} 

コントローラー：

export class LeftHandMenuComponentController implements ILeftHandMenuComponentController { 

     menuStructure: IMenuStructure[]; 
     closeOthers: boolean = true; 

     static $inject = []; 

     constructor(public module: string) { 
      console.log('binding', module); 
      console.log('binding2', this.module); 
     } 

     public $onInit =(): void => { 
      this.populateMenuStructure(); 
     } 

ルート。

$stateProvider 
      .state("bfts", 
       <ng.ui.IState>{ 
        url: "/bfts", 
        views: <any>{ 
         "leftHandMenu": <ng.ui.IState>{ 
          template: "<gonogo-lefthandmenu-component module='bfts'></gonogo-lefthandmenu-component>" 
         }, 
         "content": <ng.ui.IState>{ 
          template: "bfts content" 
         } 
        } 
       }); 

Answer 1

バインディングは、コントローラ範囲で利用可能であるので、this.moduleは働かなければなりません。

コードをplnkrで再現したところ、エラーが発生しました。

1. 主な問題は、一方向バインディングである "<"バインディングを使用することです。したがって、あなたのスコープで定義されていない "btfs"変数にアクセスしようとするので、未定義は絶対に正しい出力です。 ）（https://docs.angularjs.org/guide/component

   コンストラクタを参照して、 "@" の文字列の使用を使用する {this.bindings = { モジュール： '@' }}

2. モジュールのVARを注入いけません。 typescriptコンパイラを満たすためにあなたのコントローラに定義するだけです。

   public module：string;

3. あなたはcontrollerAsを必要としません。テンプレートは自動的に$ ctrlで注入されたスコープを取得します。mediumの私の例を見てください。それが重要かどうかは分かりません。

4. 私は自分の投稿に書かれているように、常に角度をつけることをお勧めします。モジュールは、ソースファイルの下部

変更したコードで呼び出します。

angular.module('goNoGo', []); 


class LeftHandMenuComponent implements ng.IComponentOptions { 


    public transclude: boolean = false; 
    public controller: Function = LeftHandMenuComponentController; 
    //public controllerAs: string = "vm"; 
    public template: string = "<div>module :{{$ctrl.module}}</div>"; 
    public bindings: any; 

    constructor() { 
     this.bindings = { 
      module: '@' 
     } 
    } 
} 



class LeftHandMenuComponentController { 

    menuStructure: IMenuStructure[]; 
    closeOthers: boolean = true; 
    public module: string; 

    static $inject = []; 

    constructor() { 
     console.log('binding2', this.module); 
    } 

    //public $onInit =(): void => { 
    // this.populateMenuStructure(); 
} 

angular 
    .module("goNoGo") 
    .component("gonogoLefthandmenuComponent", new LeftHandMenuComponent()); 

angular.element(document).ready(function() { 
    angular.bootstrap(document, ['goNoGo']); 
}); 

あなたはplnkr http://plnkr.co/edit/TVI9l8