javascript - Angular 1.6 无法在页面中放置多个自定义组件

Question

我使用的是 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>

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

Answer 1

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

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

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

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