AngularJS UI-路由器不会显示所有组件（只有一些）

Question

中嵌入的 "Hello Galaxy!" plunk 的一个分支成功地复制了我的问题

我的笨蛋：https://plnkr.co/edit/2GqCtEJ4mhBIdJOFHy9c?p=preview

在现有的 "Helo Galaxy!" plunk 上，我添加了以下模块和路由配置：

// file: hello.js
//     existing "Hello Galaxy!" hello module code above this ↑↑↑
//     then my new module below...

angular.module('hello.product-management', ['ui.router']).config(function($stateProvider) {
    // An array of state definitions
    var states = [
    {
        name: 'product-management-template',
        url: '/product-management-template',
        // Using component: instead of template:
        template: '<h1>Product Management</h1>'
    },
    {
        name: 'product-management-component',
        url: '/product-management-component',
        // Using component: instead of template:
        component: 'product-management'
    },

    ]

    // Loop over the state definitions and register them
    states.forEach(function(state) {
        $stateProvider.state(state);
    });
});

问题：您可以点击产品管理-模板选项卡查看产品管理模板，如下所示：

但是您无法使用产品管理 - 组件 选项卡查看 component 模板。它只显示一个空视图：

我保留了原始 "Hello Galaxy!" plunk 的组件和路由，它们仍然可以正常工作：

Answer 1

在状态定义中，使用camelCase作为组件名称：

{
    name: 'product-management-component',
    url: '/product-management-component',
    // Using component: instead of template:
    ̶c̶o̶m̶p̶o̶n̶e̶n̶t̶:̶ ̶'̶p̶r̶o̶d̶u̶c̶t̶-̶m̶a̶n̶a̶g̶e̶m̶e̶n̶t̶'̶
    component: 'productManagement'
},

并用camelCase定义组件：

̶a̶p̶p̶.̶c̶o̶m̶p̶o̶n̶e̶n̶t̶(̶'̶p̶r̶o̶d̶u̶c̶t̶-̶m̶a̶n̶a̶g̶e̶m̶e̶n̶t̶'̶,̶ ̶{̶
app.component('productManagement', {

  template: '<h1>Product Management</h1>',
  controller: function () {
    console.log("product management component");
  }      
});

有关详细信息，请参阅 AngularJS Developer Guide - Directive Normalization

AngularJS UI-路由器不会显示所有组件（只有一些）

AngularJS UI-Router won't display all Components (only some)

angularjs

angular-ui-router

angularjs-components