javascript - 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()调用函数并返回将所述配置对象传递给角度component()初始化器的组件配置对象，而不是对函数的引用getComponent。