Question

我有一个使用AngularJs（v1.7.9）的应用程序。我已经开始将应用程序迁移到Angular 10+。我已经将一些关联的指令/控制器转换为组件。到现在为止还挺好。然后，我将这些组件移到一个单独的模块中。该应用仍会生成并运行，但是在导航至这些组件的路线时，该组件不会显示。这是一些与我的项目相匹配的伪代码，为简洁起见，大部分细节都保留下来。

// overview/index.js
export default angular.module('overview', []).name;

// componentA.js
(function() {
   const ComponentA = {
      selector: 'componentA',
      template: 'path/to/template.html',
      bindings: {},
      constrollerAs: 'ctrl',
      controller: function () {
         console.log('component A');
      }
   };

   angular.module('overview').component(ComponentA.selector ComponentA);
})();

// app.js
import Overview from './overview/index.js';

const app = angular.module('app', ['ngRoute','Overview'])
   .config(['$routeProvider', ($routeProvider) => {

            $routeProvider.when(`/`, {
                template: '<componentA></componentA>'
            });

            ...
            // other routes that still work; controllers defined within app module
}])
...

我无法确定模块语法是否正确，或者只是找不到用于渲染的组件。

对我哪里出错了有何想法？

Answer 1

Jeff Hiatt，我相信您会将对overview组件的引用作为指令添加到app.js中。这将在app const的定义之后添加：

app.directive('componentA', Overview)

使用AngularJs ngRoute，如何路由到与根模块不同的单独模块中的组件？

1 个答案: