Question

我在创建一个包含<router-outlet>的组件以显示子路由时遇到问题，该路由同时是父级的子级，具有自己的<router-outlet>。

以下是通过<a>代码显示4种不同路线的此行为：https://plnkr.co/edit/0BNNkv?p=preview

plunk有一个app根组件，其中包含在子项中指定的空路由，以及一个名为NavigatorComponent的父组件，用于导航。这个'父'使用子路由以及我希望在app组件中有根路由模块。

const navigatorRoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES)

我正在尝试这样做，因为我不希望任何自定义组件成为路由根。

对于那些建议我将导航器移动到父母的人，我会说我已经考虑过了，我可能会最终做到这一点。但是，我想知道我建议的模式是否可行。

AppComponent加载根路由模块，该模块没有路由和NavigatorModule。 NavigatorModule定义了四条路线：

第一个子路由有loadChildren的延迟加载（Child1Component），没有子进入。单击时，控制台中不会抛出任何错误，但未加载任何内容。
第二条儿童路线有一条到Child2Component的急切加载路线，该路线同时有两条儿童路线。这些路由加载时没有问题，但加载在父项的<router-outlet>中，而不是Child2Component中定义的路由。
第二个子路由具有相同的结构，但它具有在NavigatorComponent属性内的父children中定义的子路由。这表现得很好，但我期望在Subchild21Component内定义到子项（p.e。Child2Component）的嵌套路由，而不是NavigatorComponent。我试着在这里保持代码解耦。如果您发现这是夸大的，请告诉我。
第三个子路由类似于第一个路径（使用loadChildren延迟加载），但在这种情况下它有子节点。它的行为与第二个子路线相同。
第四条路线是接近我想要实现的目标的路线。它有几个路由，在Child4Component中声明，并正确加载到其<router-outlet>。

最后一条路线的缺点是必须将Route个孩子导入NavigatorComponent中的儿童属性。这不会那么糟糕（因为路径是在孩子中定义的），但同时我必须使用这些路线将ModuleWithProviders（ModuleWithProviders = RouterModule.forChild(EXP_ROUTES)）定义为Child4Component将此模块导出到NavigatorComponent以使其生效。这听起来像是样板代码，所以我想我可能会遗漏一些东西。此外，我不知道如何在这里进行延迟加载，因为我必须将模块导入到导航器中。

我是Angular的新手（不仅仅是angular2，而是一般的角度）所以我要感谢你对代码的任何评论，除了问题本身。

根路由

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

const ROUTES: Routes = [

];

export const appRoutingProviders: any[] = [

];

export const appRoutingModule: ModuleWithProviders = RouterModule.forRoot(ROUTES);

导航器模块路由

const ROUTES: Routes = [
  {
    path: '',
    redirectTo: 'child1',
    pathMatch: 'full'
  },
  { path: 'child1',             loadChildren: () => Child1Module  },
  { path: 'child2',             component: Child2Component },
  {
    path: 'child2-children',
    component: Child2Component,
    children: [
      { path: '',               redirectTo: 'subchild21'        },
      { path: 'subchild21',     component: Subchild21Component  },
      { path: 'subchild22',     component: Subchild22Component  }
    ]
  },
  { path: 'child3', loadChildren: () => Child3Module },
  { path: 'child4', component: Child4Component, children: [...EXP_ROUTES ] }
];

const navigatorRoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

导航器组件/模板

@Component({
  selector: 'navigator',
    template:
    `<h5>We navigate here!</h5>
    <div style="display: inline;">
        <a routerLink="child1" title="Lazy-loading. No children">Child1</a>
        <a routerLink="child2" title="Eager-loading. Children defined in child component">Child2</a>
        <a routerLink="child2-children" title="Eager-loading. Children defined in the parent">Child2-Children</a>
        <a routerLink="child3" title="Lazy-loading. Children defined in the children">Child3</a>
        <a routerLink="child4" title="Eager-loading. Children defined in the parent and the children">Child4</a>
    </div>
    <router-outlet></router-outlet>`
})
export class NavigatorComponent { }

Child1路线

const ROUTES: Routes = [
  { path: '', component: Child1Component  }
];

const child1RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

Child2组件/模块

const ROUTES: Routes = [
      { path: 'child2',
        children: [
          { path: 'subchild21', component: Subchild21Component  },
          { path: 'subchild22', component: Subchild22Component  }
        ]
      }
];

const child2RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

@Component({
  selector: 'child2',
    template:
    `<h5>This is child 2!</h5>
    <div style="display: inline;">
        <a routerLink="subchild21">Subchild21</a>
        <a routerLink="subchild22">Subchild22</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child2Component { }

@NgModule({
  imports:      [ child2RoutingModule, Subchild21Module, Subchild22Module ],
  exports:      [ Child2Component ],
  declarations: [ Child2Component ]
})
export class Child2Module { }

Child3组件/模块

const ROUTES: Routes = [
  {
    path: '',
    component: Child3Component,
    children: [
      { path: '',               redirectTo: 'subchild31'        },
      { path: 'subchild31',     component: Subchild21Component  },
      { path: 'subchild32',     component: Subchild22Component  }
    ]
  }
];

const child3RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

@Component({
  selector: 'child3',
  template:
    `<h5>This is child 3!</h5>
    <div style="display: inline;">
        <a routerLink="subchild31">Subchild31</a>
        <a routerLink="subchild32">Subchild32</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child3Component { }

@NgModule({
  imports:      [ child3RoutingModule, ],
  exports:      [ Child3Component, ],
  declarations: [ Child3Component ]
})
export class Child3Module { }

Child4组件/模块

export const EXP_ROUTES: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'subchild41' },  
    { path: 'subchild41', component: Subchild21Component    },
    { path: 'subchild42', component: Subchild22Component    }
];

const child4RoutingModule: ModuleWithProviders = RouterModule.forChild(EXP_ROUTES);

@Component({
  selector: 'child4',
    template:
    `<h5>This is child 4!</h5>
    <div style="display: inline;">
        <a routerLink="subchild41">Subchild41</a>
        <a routerLink="subchild42">Subchild42</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child4Component { }

@NgModule({
  imports:      [ child4RoutingModule, Subchild21Module, Subchild22Module ],
  exports:      [ Child4Component ],
  declarations: [ Child4Component ]
})
export class Child4Module { }

Angular 2路由器在创建多级子路由

0 个答案: