Angular 1.6 Cant在页面中放置了多个自定义组件

Question

我正在使用angular 1.6，并且有两个组件，config-list和request-dates。

如果这些组件是页面上的唯一组件，则它们可以正常工作，但是如果我在页面上放置多个组件，则只有第二个组件可以工作。 因此，在下面的页面中，请求日期有效。

页面上只能有一个组件吗？

这是主页：

<div ng-app="playground" ng-cloak>
    <config-list></config-list>
    <request-dates></request-dates>
</div>uest-

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/app/module.js"></script>
<script src="~/Scripts/app/config-list.component.js"></script>
<script src="~/Scripts/app/request-dates.component.js"></script>

这是module.js：

(function () {
    "use strict";

    angular.module("playground", []);    
}());

这是config-list.component.js：

(function(){

    var module = angular.module("playground", []);

    function controller()
    {
        var model = this;
    };

    module.component("configList",
        {
            templateUrl: "/Scripts/app/config-list.component.html",
            controller: controller,
            controllerAs: "model"
        });
}());

这是config-list.component.html：

<p>Hello from configlist</p>

这是request-dates.component.js：

(function () {
    var module = angular.module("playground", []);

    function controller()
    {
        var model = this;
    }

    module.component("requestDates",
        {
            templateUrl: "/Scripts/app/request-dates.component.html",
            controller: controller,
            controllerAs: "model"
        });
}());

这是request-dates.component.html：

<p>Hello from requestDates</p>

[更新]-正如正确答案所示，我不小心用一个包含第二个组件的新模块覆盖了该模块（擦除了第一个组件），这解释了为什么第一个组件没有出现。

Answer 1

访问playground模块时，不需要第二个参数（依赖项）。

因此，在module.js您可以使用var module = angular.module("playground", []); 这是创建模块的正确方法。

然后在config-list.component.js和request-dates.component.js ，您应该只是访问模块，而不是创建它们。

访问已经创建的模块： var module = angular.module("playground");