Angular 1.6 不能在一个页面中放置多个自定义组件答案

【问题标题】：Angular 1.6 Cant put more than one custom component in a pageAngular 1.6 不能在一个页面中放置多个自定义组件
【发布时间】：2017-02-18 04:02:13
【问题描述】：

我使用的是 Angular 1.6，我有两个组件，配置列表和请求日期。

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

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

这是主页：

<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>

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

【问题讨论】：

尝试从外部文件中的模块声明中删除括号（和逗号）
AngularJS best practices for module declaration?的可能重复
No sh0ber，这不是重复的 - 最佳实践链接不是重复的答案，正如下面的答案所述，我不小心重新定义（并因此覆盖）现有模块。在您对某人的回答投反对票（这会影响他们的声誉）之前，您应该更加小心。
这个问题经常被问到（即我如何使用 2 个模块/页面？）另外，我没有留下评论希望得到答复。它通过近距离投票自动生成。
不过我没有否决任何人的回答。

标签： javascript angularjs

【解决方案1】：

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

所以，在您的module.js 中，您有var module = angular.module("playground", []);，这是创建模块的正确方法。

那么在你的config-list.component.js 和request-dates.component.js 中，你应该只是访问你的模块，而不是创建它们。

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

【讨论】：