Question

我使用的是角度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"
        });
}());

这是＆configs.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", []);中{em}创建模块的正确方法{/ 1}}。

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

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

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

1 个答案: