具有共享父组件的Angular2 NgRouter

Question

我的 angular 2 typescript 应用程序中有以下组件：

• 应用组件
• 项目组件
  • 项目列表组件
  • ProjectNewComponent

我有一个简单的布局，在所有页面上应该都是一样的，所以我把下面的html代码作为主要组件：

<h1>Welcome</h1><a routerLink="/">Home</a>
<hr />
<router-outlet></router-outlet>

据我了解，路由器将其内容注入<router-outlet>。现在我想创建一个嵌套的项目组件。为简单起见，项目组件应由三个部分组成。一个父组件，只包含标题和一个容器以及两个嵌套在父组件中的子组件。

我的app.routing.ts 如下所示：

const appRoutes : Routes = [
    {
        path: 'project',
        component: ProjectComponent,
        children: [
            { path: 'id/:id', component: ProjectEditComponent },
            { path: 'new', component: ProjectNewComponent }
        ]
    }
];

我的问题是：Project 组件和ProjectList 组件应该是什么样子的？

到目前为止我有project.html:

<h3>Projects</h3>
<hr />
<project-list></project-list>
<project-new></project-new>

我的目标是，每当我打电话给ProjectListComponent 或ProjectNewComponent：

<h3>Projects</h3>
<hr />
<div>
    <project-current-component></project-current-component>
</div>

我怎样才能做到这一点？这样做的好处是我不必重写任何 html 代码。

Answer 1

如果我正确理解您想要实现的目标，您的项目组件还应该包括一个路由器插座（在我最近使用的 angular2 RC5 中，允许嵌套路由器插座）。

AppComponent 类似于：

<h1>This is the app component title</h1>
<router-outlet></router-outlet>

ProjectComponent 将是：

<h3>Projects</h3>
<router-outlet></router-outlet>

ProjectsComponent 的 子 组件将是：

<h5>Child components area</h5> 
<div>
<!-- place whatever code you have inside here -->   
     <project-current-component></project-current-component>
</dir>