Angular 2:从另一个模块访问路由

Nic*_*s D 6 angular

在这里,我有自己的模块,我想从 foo 模块范围之外访问我的路线 foo-detail。

//app/bar/foo/foo.module.ts
import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { FooComponent } from './foo.component';
import { FooRoutingModule } from './foo.routing';
import { DetailFoo } from './detailFoo/detailFoo.component';
import { ListFooComponent } from './listFoo/listFoo.component';


@NgModule({
  imports: [
    CommonModule,
    FooRoutingModule
  ],
  declarations: [
    FooComponent,
    DetailFoo,
    ListFooComponent
  ]
})
export declare class FooModule {}
Run Code Online (Sandbox Code Playgroud)

以及它自己的路由文件

//app/bar/foo/foo.routing.ts

import { NgModule }             from '@angular/core';
import { Routes, RouterModule }  from '@angular/router';

import { FooComponent } from './foo.component';
import { ListFooComponent } from './listFoo/listFoo.component';
import { DetailFoo } from './detailFoo/detailFoo.component';

const appRoutes: Routes = [
  { path: 'foo', component: FooComponent },
  { path: 'foo-list', component: ListFooComponent },
  { path: 'foo-detail', component: DetailFoo }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class FooRoutingModule {}
Run Code Online (Sandbox Code Playgroud)

我尝试将我的模块包含在另一个模块中,以便我们可以到达模块 bar 内的模块 foo 的路由。

//app/bar/bar.module.ts

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';

import { routing }       from './bar.routing';

import { Bar } from './bar.component';
import { FooComponent } from '../bar/foo/foo.component';

@NgModule({
  imports: [CommonModule, routing],
  declarations: [Bar,FooComponent]
})
export class BarModule {
}





//app/bar/bar.routing.ts

import { Routes, RouterModule }  from '@angular/router';
import { Bar } from './bar.component';
import { FooComponent } from '../bar/foo/foo.component';
// noinspection TypeScriptValidateTypes
const routes: Routes = [
  {
    path: 'login',
    loadChildren: () => System.import('./login/login.module')
  },
  {
    path: 'register',
    loadChildren: () => System.import('./register/register.module')
  },
  {
    path: 'bar',
    component: Bar,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', loadChildren: () => System.import('./dashboard/dashboard.module') },
      { path: 'editors', loadChildren: () => System.import('./editors/editors.module') },
      { path: 'test',  loadChildren: () => System.import('./test/test.module') }
    ]
  },
  {
    path: 'foo-module',
    component: FooComponent,
    children: [
      { path: 'foo', loadChildren: () => System.import('./foo/foo.module') }
    ]
  }
];

export const routing = RouterModule.forChild(routes);
Run Code Online (Sandbox Code Playgroud)

这是我的问题,我尝试在这里做各种事情,但我无法从 Bar 访问我的 Foo 路线。我在 bar.routing.ts 中尝试过

import { DetailFoo } from '../bar/foo/detailFoo/detailFoo.component';
Run Code Online (Sandbox Code Playgroud)

和路线

path: 'foo-detail',component: detailFoo
Run Code Online (Sandbox Code Playgroud)

我做了很多测试,直接使用组件、模块或路由。没有什么能让我从 Bar 模块访问 Foo 的某些路由。

我错过了什么。我是否必须以某种我忘记的方式提供依赖注入?

编辑我使用 ng2-admin 模块,并且我的路由全部收集在 const PAGES_MENU 中,其中包含以下内容:

        {
            path: 'arrival-list',
            data: {
              menu: {
                title: 'Liste',
              }
            }
          },
Run Code Online (Sandbox Code Playgroud)

这里我们将其填入MENU

import { PAGES_MENU } from './pages/pages.menu';

export const MENU = [
  ...PAGES_MENU
];
Run Code Online (Sandbox Code Playgroud)

最后 ng2-admin 创建了一个 cloneDeep。这可能是我们的问题!

  public routes = _.cloneDeep(MENU); // we're creating a deep copy since we are going to change that object
Run Code Online (Sandbox Code Playgroud)

太长了;如何访问另一个模块内部模块的路由?