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

问题描述：

我试图将我的应用程序拆分成Angular 2中的较小模块。我得到了模块部分，我试图将路由移动到每个模块。一切似乎都会好起来的，除了我的活动路由组件似乎并没有被包装在父模块组件中。让我试着解释一下。从父模块的另一个组件包装角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的链接。当点击“管理页面”的链接我想admin.component的HTML包装的管理，page.component的HTML

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

答

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

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

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

并以与SO警察闹不了，我就不提了，我也有一个路由过程可能帮你。

你统治！这正是它的原因！我会完全检查你未提及的课程，我们已订购PluralSight作为我工作中的一项津贴。感谢所有的帮助！ –

答

您可以设置多个路由层次来管理你的路线。

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>

我遇到的根本问题是管理部分vs常规部分。管理部分需要与常规网站部分完全不同。我的想法是在站点模块的SiteComponent html中包含页眉，顶部菜单和页脚，并将admin菜单，管理页眉等包含在管理模块AdminComponent的html中。没有这个，我不得不将所有这些东西包含在各自模块的每个页面上。 CompanyEditComponent的html将与其他每个管理页面一起 admin-footer>。 –

啊......我明白了。然后你确实需要层次结构，但不只是一个。我会在上面更新我的答案。 – DeborahK

它肯定会很好，如果这是一个*要求*任何人失望的选票离开理由！ – DeborahK

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

相关推荐