角度JSコンポーネント私はコンポーネント以下のいる

Question

バインディング：

(function() { 
    "use strict"; 
    angular.module("application_module") 
     .component('tab', { 
      controller: 'TabCtrl', 
      templateUrl: 'app/component/application/app-header/tab/tab.html', 
      bindings: { 
       'pageName': '<', 
       'pageNo': '<' 
      } 
     }); 
})(); 

そのHTMLテンプレート：

<md-nav-item md-nav-click="$ctrl.goto($ctrl.pageNo)" 
      name="$ctrl.pageNo"> 
    {{$ctrl.pageName}} 
</md-nav-item> 

そのコントローラ：私は次のコードからそれを使用しよう

(function() { 
    "use strict"; 

    angular.module("application_module") 
     .controller('TabCtrl', TabCtrl); 

    function TabCtrl() { 
     let self = this; 
    } 
})(); 

：

<tab pageName="EmployeeInfo" pageNo="page1"></tab> 

レンダリングされたページの最終HTMLではpageNameとpageNoが表示されません。なにが問題ですか？

<tab pagename="EmployeeInfo" pageno="page1"></tab> 

とコンポーネントで：

Answer 1

問題はキャメルケースとあった、我々はlowcase使用

bindings: { 
    'pagename': '@', 
    'pageno': '@' 
} 

をそして、それは今、[OK]を動作します。

Answer 2

ハイフンと小文字を使用するようにバインディング属性名を変換する必要があります。だからあなたの例：

<tab page-name="EmployeeInfo" page-no="page1"></tab>