Question

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

AppComponent
ProjectComponent
- ProjectListComponent
- 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

如果我正确理解你想要实现的目标，你的Projects组件还应该包括一个路由器插座（我最近使用的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>

Angular2 NgRouter与共享父组件

1 个答案: