AngularJS组件无法渲染

Question

我正在使用AngularJS 1.5.11。

我似乎无法正确连接我的组件。如果我硬编码模板属性，它的工作原理如下：

$stateProvider.state("dashboard.expense", {
  url: "/expense",
  template: `<div>Geddy Lee</div>`
})

^^确实在页面上显示Geddy Lee。

但是只要我将其指向某个组件，就不会发生渲染：

$stateProvider.state("dashboard.expense", {
  url: "/expense",
  component: "expenseReportsComponent"
})

我保持组件简单，只是为了看看我是否可以让它呈现：

module.component('expenseReportsComponent', {
  template: `<div>Geddy Lee</div>`
});

^^ Geddy Lee未显示。

没有控制台错误。我尝试了各种各样的改变，但似乎没有任何效果。我错过了什么？

Answer 1

仔细检查您正在使用的ui-router版本。我相信组件属性是在1.0.0中添加的。

Answer 2

你很可能使用旧版本的ui-router。要么迁移到新版本，要么使用：

template: `<expense-reports-component></expense-reports-component>`

在这种情况下，你不会拥有像uiOnParamsChanged这样的所有功能，但这当然会奏效。

Answer 3

将它们组合在一起并在州声明中使用模板和组件：

$stateProvider.state("dashboard.expense", {
  url: "/expense",
  template: `<div>Geddy Lee</div>`,
  component: "expenseReportsComponent"
})