Question

我试图将我的应用程序拆分为Angular 2中的较小模块。我将模块部分放下，我试图将路径移动到每个模块。一切似乎都没问题，除了我的主动路线组件似乎没有包装在父模块组件中。让我试着解释一下。

当你在Angular（app.module.ts）中有一个模块时，你通常有一个同名的组件（app.component.ts）。 app.component包含一个标记，该标记允许角度知道插入活动路径视图的位置。现在让我们说我有一个名为admin.module的模块。我想有一个名为admin.component的组件，它包装了它下面的任何活动组件，就像app.component对app.module下的路由一样。

我基本上希望每个模块都有一个模板。点击公司编辑申请的路线，我想：

App.module (using app.component.html)
     Admin.module (using admin.component.html)
          Company.module (using company.component.html)
               Company-Edit.component (using company-edit.component.html)

我是以错误的方式思考这个问题，还是完全有可能，但我错过了什么？

更新：我觉得我不够具体，所以这里有一些代码。这是我创建的plnkr的链接。点击＆＃34;管理页面＆＃34;链接我想admin.component的html包装admin-page.component＆＃39; s html

https://plnkr.co/edit/XhlLJId6Ua8At5z1ZNlz?p=preview

Answer 1

当您有子路由器插座时，您需要定义子路由。我修改了你的plunker如下：

  RouterModule.forChild([
    { 
      path: 'admin', 
      component: AdminComponent,
      children: [
        { path: 'page', component: AdminPageComponent  }
      ]
    }
  ])
],

我在这里更新了plunker：https://plnkr.co/edit/AdUZ34JGwp4o4cpYrNuy?p=preview

为了不与SO警察发生麻烦，我没有提到我也有一个可以帮助你的路线课程。

Answer 2

您可以设置多个路线层次结构来管理路线。

App Component
  <router-outlet></router-outlet> // <-Regular or admin goes here

- Regular site component
    <header></header>
    <menu></menu>
    <router-outlet> // <-Regular features get routed here
    <footer></footer>

- Admin site component
    <admin-header></admin-header>
    <router-outlet> // <-Admin features get routed here
    <admin-footer></admin-footer>

从父模块中包装另一个组件中的Angular 2组件

2 个答案: