一个模板中的多个组件

【问题标题】：multiple components in one template一个模板中的多个组件
【发布时间】：2017-09-13 13:37:12
【问题描述】：

我有主组件，其模板是另一个组件。我想知道我是否可以在一个模板中有 2 个组件，两者都可以显示。例如，我创建了包含导航的组件，另一个包含正文。由于我需要导航在所有其他页面中保持不变，因此我为它制作了一个组件。我该如何解决这个问题？有没有可能？

例如

import { Component } from '@angular/core';

@Component({
moduleId: module.id,
selector: 'my-app',
template: `
<firstComponent></firstComponent>
<secondComponent></secondComponent>
`
})
export class AppComponent {

}

【问题讨论】：

标签： angular components angular2-template angular-components

【解决方案1】：

您可以通过将它们作为两个独立的组件并将其添加到相应模块的声明数组中来做到这一点

import { Component } from '@angular/core';

@Component({
selector: 'firstComponent',
template: `
         ..................
`
})
export class FirstComponent {

}

Second component
import { Component } from '@angular/core';

@Component({
selector: 'secondComponent',
template: `
         ..................
`
})
export class SecondComponent {

}


export class AppModule {

declarations:[AppComponent,FirstComponent,SecondComponent]

【讨论】：

我已经将所有组件添加到 AppModule 中的声明数组中，将它们作为两个单独的组件。现在我不知道如何将它们组合为我的 AppComponent 中的模板，以便同时显示两者。
您之前的 AppComponent 的模板会按预期将这两个组件放在一个视图中