Javascript AngularJS组件定义为函数

当我使用返回组件对象的函数创建组件时，我的组件没有初始化！我分享这两种情况。有人能解释一下他们之间的区别吗

Html:

工作代码：

var-navbertemplate=`单击测试'；
var导航条={
控制器：函数（）{
this.clickTest=clickTest；
函数clickTest（）{
警惕（“你好”）；
}
},
模板：NavbarTemplate
};
角度模块（'demoApp'，[]）。组件（'navbar'，navbar）；

错误（无错误）代码：

函数getComponent（）{ 变量模板=`单击测试'； 变量分量={ 控制器：函数（）{ this.clickTest=clickTest； 函数clickTest（）{ 警惕（“你好”）； } }, 模板：模板 } 返回组件； } 角度.module（'demoApp'，[]）.component（'navbar'，getComponent）；

---

您需要在作为参数传递到最后一行的

getComponent

中添加括号，如下所示：

angular.module（'demoApp'，[]）.component（'navbar'，getComponent（））

仅使用
getComponent
（不带括号）将对
getComponent
函数的引用传递到
component（）
，而不执行它。但是，angular需要一个包含组件配置的对象

因此，传递
getComponent（）
调用函数，并将传递所述配置对象的组件配置对象返回给angular
component（）
初始值设定项，而不是对函数的引用
getComponent
您不应该传递对象文本吗？试试
.component（'navbar'，getComponent（））
@Daniel\L谢谢你的回答。我试过了，它成功了。我熟悉指令：）。
<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);