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

时间:2016-12-08 12:13:34

标签: 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 {}

自己的路由文件

//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 {}

我尝试将我的模块包含在另一个模块中,这样我们就可以在模块栏中找到模块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);

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

import { DetailFoo } from '../bar/foo/detailFoo/detailFoo.component';

和路线

path: 'foo-detail',component: detailFoo

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

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

EDIT 我使用ng2-admin模块,我的路由都聚集在一个const PAGES_MENU中 其中包含:

        {
            path: 'arrival-list',
            data: {
              menu: {
                title: 'Liste',
              }
            }
          },

这里我们将其填入MENU

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

export const MENU = [
  ...PAGES_MENU
];

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

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

TLDR; 如何访问另一个模块内的模块路径?

0 个答案:

没有答案