Угловая JS Компонент Binding

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>