一个模板中的多个组件

Posted 2023-02-23

【中文标题】一个模板中的多个组件

【英文标题】：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 

【参考方案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 的模板会按预期将这两个组件放在一个视图中