0

我试图组织我的代码与组件路由教程有点不同。很简单，我希望我的应用程序具有这种结构。

app.js
-components/
 +-settings/
  +-settings.js
  +-general/
   +-generalSettings.js

我正在使用 Angular 1.5 和这个版本的 Angular 路由器：这行得通

应用程序.js

'use strict';
angular.module('admin', [ 'ngComponentRouter', 'settings' ])

  .config(function($locationProvider) {
    $locationProvider.html5Mode(true);
  })

  .value('$routerRootComponent', 'admin')

  .component('admin', {
    templateUrl: 'scripts/app.html',
    $routeConfig: [
        {path: '/settings/...', name: 'Settings', component: 'settings', useAsDefault: true}
    ]
  })

设置.js

angular.module('settings', [])
    .component('settings', {
        template: '<h1>settings</h1><ng-outlet></ng-outlet>',
        $routeConfig: [
            {path: '/general', name: 'GeneralSettings', component: 'generalSettings', useAsDefault: true}
        ]
    })
    .component('generalSettings', {
        template: '<h2>General</h2>',
        controller: GeneralSettingsCtrl,
    })

function GeneralSettingsCtrl(){
}

但是，当我尝试从 settings.js 文件中删除常规设置组件时，我收到错误消息Cannot read property '$routerOnActivate' of undefined。

我怀疑这是我定义/注入依赖项的方式，或者我可能需要为generalSettings定义一个单独的模块（定义自己的模块'generalSettings'并注入它似乎有效，我不相信这是最好的选择寿）。几乎可以归结为我不确定最好的方法。真的不想将每个嵌套组件都放在一个文件中。请指教，谢谢！

4

1 回答 1

0

所以不知道为什么，但是当我将设置“组件”从设置重命名为它时，applicationSettings它工作得很好。

我试图组织我的代码与组件路由教程略有不同。很简单，我希望我的应用程序具有这种结构。

app.js
-components/
 +-settings/
  +-settings.js
  +-general/
   +-generalSettings.js

我正在使用 Angular 1.5 和 [this version][1] of angular router：这行得通

应用程序.js

'use strict';
angular.module('admin', [ 'ngComponentRouter', 'settings' ])

  .config(function($locationProvider) {
    $locationProvider.html5Mode(true);
  })

  .value('$routerRootComponent', 'admin')

  .component('admin', {
    templateUrl: 'scripts/app.html',
    $routeConfig: [
        //-----------------> changed the component name
        {path: '/settings/...', name: 'Settings', component: 'applicationSettings', useAsDefault: true}
    ]
  })

设置.js

angular.module('settings', [])
    // ----------------------------------> changed component name to application settings
    .component('applicationSettings', {
        template: '<h1>settings</h1><ng-outlet></ng-outlet>',
        $routeConfig: [
            {path: '/general', name: 'GeneralSettings', component: 'generalSettings', useAsDefault: true}
        ]
    })
    .component('generalSettings', {
        template: '<h2>General</h2>',
        controller: GeneralSettingsCtrl,
    })

function GeneralSettingsCtrl(){
}
于 2016-05-08T16:22:17.167 回答