Javascript 角2和分量树

我正在研究Angular 2内部组件和行为，我有一些关于组件树管理的问题

在基于组件的web应用程序中，很明显我们有一个组件树。一个组件由另一个组件组成，从上到下，非常强大

但是现在，我想知道angular 2如何在内部管理这个组件树的表示

---

我的意思是，我们永远不会说在一个角度分量中，除了在模板中，什么分量会在它里面。

---

例如，我从未在我的HomeComponent定义中说过它拥有一个PrestaCardComponent：

从'@angular/core'导入{Component，OnInit，Inject}；
@组成部分({
选择器：“应用程序主页”，
templateUrl:“./home.component.html”，
样式URL:['./home.component.css']
})
导出类HomeComponent实现OnInit{
预设：数组；
特征：数组；
构造函数（@Inject（'AppStore'）私有AppStore:any）{
这是1.prestations=[]；
this.featurettes=[]；
}
恩戈尼尼特（）{
}
}

除我的模板外：

<div *ngFor="let prestation of prestations" class="col-md-4 m-b">
                <app-presta-card [title]="prestation.title" [content]="prestation.content" [image]="prestation.image"></app-presta-card>
            </div>

我理解它的意思

这意味着Angular 2能够通过读取不同的模板来创建虚拟组件树

怎么可能呢？它是如何工作的？

使用占卜。您将获得清晰的洞察力。

使用占卜。您将获得清晰的洞察力。

是理解Angular在解析模板时如何破译模板的关键

在使用

@NgModule

进行装饰时，查看这些属性的

声明：属于此模块的组件、指令和管道的列表

导入：要导入到此模块的模块列表。从导入的模块到该模块的声明，都是可用的

导出：导入此模块的模块可见的组件、指令和管道列表

使用这些知识，Angular知道选择器意味着什么，并使用反射获取组件的元数据

当然还有更多，但这可能是一个开始

希望这有帮助

是理解Angular在解析模板时如何破译模板的关键

在使用

@NgModule

进行装饰时，查看这些属性的

声明：属于此模块的组件、指令和管道的列表

导入：要导入到此模块的模块列表。从导入的模块到该模块的声明，都是可用的

导出：导入此模块的模块可见的组件、指令和管道列表

使用这些知识，Angular知道选择器意味着什么，并使用反射获取组件的元数据

当然还有更多，但这可能是一个开始

---

希望这有帮助

您的组件的所有配置都植根于

正如Madhu Ranjan在其回答中已经提到的，NGM模块中有以下三个重要部分，即：

声明：属于此模块的组件、指令和管道的列表

导入：要导入到此模块的模块列表。从导入的模块到该模块的声明，都是可用的

导出：导入此模块的模块可见的组件、指令和管道列表

实际上，甚至还有一个用于NgModule的模块，因为它是自（我认为）RC5以来angular2体系结构的一个重大变化

每个组件都必须是NGM模块的一部分。它声明了应用程序的一部分，其中的功能属于彼此。您甚至可以使用导入部分将NgModules相互嵌套

IMO的一个积极方面是，您可以使用此结构很好地组织应用程序，因为每个angular模块都有自己的路由配置

此外，您可以限制应该使用的服务的可访问性，方法是在另一个模块的（子）模块内声明这些服务，仅列举一些重要功能

---

有关此主题和更多主题的更多信息，请查看。它非常详细，我也很容易理解，因为angular团队花了很多精力来保持它的最新和干净（当你不介意搜索一些你需要的部件时，因为文档中的主题分组有点糟糕）。

所有组件的配置都植根于

正如Madhu Ranjan在其回答中已经提到的，NGM模块中有以下三个重要部分，即：

声明：属于此模块的组件、指令和管道的列表

导入：要导入到此模块的模块列表。从导入的模块到该模块的声明，都是可用的

导出：导入此模块的模块可见的组件、指令和管道列表

实际上，甚至还有一个用于NgModule的模块，因为它是自（我认为）RC5以来angular2体系结构的一个重大变化

每个组件都必须是NGM模块的一部分。它声明了应用程序的一部分，其中的功能属于彼此。您甚至可以使用导入部分将NgModules相互嵌套

IMO的一个积极方面是，您可以使用此结构很好地组织应用程序，因为每个angular模块都有自己的路由配置

此外，您还可以限制应该使用的服务的可访问性，方法是在另一个模块的（子）模块内声明这些服务

<div *ngFor="let prestation of prestations" class="col-md-4 m-b">
                <app-presta-card [title]="prestation.title" [content]="prestation.content" [image]="prestation.image"></app-presta-card>
            </div>