时间戳

首页 > 解决方案 > 在AngularJS中从另一个模块导入组件的最佳方法是什么？

angularjs - 在AngularJS中从另一个模块导入组件的最佳方法是什么？

问题描述

我的AngularJS（v1.7）应用程序中有2个子模块，我们称它们为A和B。我正在尝试从模块B（componentB）导入一个组件（带有html模板和控制器），以在内部使用模块 A (componentA) 中组件的模板。

在阅读Reuse AngularJS Component in another Module (Dependency Injection)之后，我首先尝试通过将 componentB 指定为 componentA 的依赖项，然后在 componentA 的模板中使用它来做到这一点。

组件A.js

angular.module('A', ['componentB']).component('componentA', {...});

组件A.html

<div>
   <componentB></componentB>
</div>

不幸的是，即使 componentB 被正确定义并在模块 B 中成功使用，这也不起作用。我还尝试通过修改app.js如下所示将模块 B 指定为模块 A 的依赖项：

angular.module('A', ['B'])
.config(...

在这两种情况下，我都会得到一个

未捕获的错误：[$injector:modulerr]

我很难找到与 AngularJS 相关的类似问题/文章，而不是较新的 Angular。我对AngularJS也很生疏，所以任何帮助都将不胜感激，在此先感谢。

标签： angularjscomponents

解决方案

这很简单：

angular.module("moduleB",[])
.component("componentB", {
     template: "<div>This is Component B from Module B</div>"
});

angular.module("moduleA",["moduleB"])

<div ng-app="moduleA">
    <component-b></component-b>
</div>

通过声明为依赖项来moduleA导入组件。moduleBmoduleB

模块创建与检索

只有第一个模块声明应该指定依赖项。

错误

angular.module('moduleA', [])
.controller('ctrl', /* ... */) 

angular.module('moduleA', ['moduleB'])
.service('serviceA', /* ... */)

再次声明依赖会导致控制器被注销。

更好的

angular.module('moduleA', ['moduleB'])

angular.module('moduleA')
.controller('ctrl', /* ... */) 

angular.module('moduleA')
.service('serviceA', /* ... */)

有关详细信息，请参阅

推荐阅读