AngularJS組件定義為函數

Question

當我使用返回組件對象的函數創建組件時，我的組件未初始化！ 我分享這兩種情況。 有人能解釋一下他們之間有什么區別嗎？

HTML：

<div ng-app="demoApp">
  <navbar></navbar>
</div>

工作代碼： 小提琴

var NavbarTemplate = `<button ng-click="$ctrl.clickTest()">Click Test</button>`;
var navbar = {
  controller: function() {
    this.clickTest = clickTest;
    function clickTest() {
      alert("hello");
    }
  },
  template: NavbarTemplate
};
angular.module('demoApp', []).component('navbar', navbar);

錯誤（無錯誤）代碼： 小提琴

function getComponent(){
    var template = `<button ng-click="$ctrl.clickTest()">Click Test</button>`;
    var component = {
    controller: function() {
      this.clickTest = clickTest;
      function clickTest() {
          alert("hello");
        }
    },
    template: template
  }
  return component;
}
angular.module('demoApp', []).component('navbar', getComponent);

Answer 1

您需要添加括號以將getComponent作為參數傳遞給最后一行，如下所示：

angular.module('demoApp', []).component('navbar', getComponent());

使用簡單的getComponent （沒有括號）將對getComponent函數的引用傳遞給component()而不執行它。 但是，angular需要包含組件配置的對象。

因此，傳遞getComponent()調用該函數並返回將所述配置對象傳遞給angular component()初始值設定項的組件配置對象，而不是對函數getComponent的引用。