角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> 

我沒有看到pageName和pageNo在渲染頁面的最終的HTML。哪裏不對？

Answer 1

的問題是與駝峯，我們使用lowcase：

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

和組件：

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

現在它工作正常。

Answer 2

您需要綁定屬性名稱轉換爲使用連字符和小寫字符。因此，例如：

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