Angular 2 和组件树

Question

我正在研究 Angular 2 内部组件和行为，我对组件树管理有一些疑问。

在基于组件的网络应用中，很明显我们有一个组件树。一个组件由另一个组件组成，从上到下，真的很强大。

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

---

我的意思是我们永远不会在 Angular 组件中说，组件将在它内部，除了在模板中。

---

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

import { Component, OnInit, Inject } from '@angular/core';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    prestations: Array<any>;
    featurettes: Array<any>;
    constructor( @Inject('AppStore') private appStore: any) {
        this.prestations = [];
        this.featurettes = [];
    }

    ngOnInit() {

    }

}

我的模板除外：

<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 能够通过读取不同的模板来创建虚拟组件树。

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

Answer 1

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

Answer 2

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

在使用@NgModule 装饰时查看这些属性的definition，

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

imports ：要导入此模块的模块列表。导入模块中的所有内容都可用于该模块的声明。

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

利用这些知识，Angular 知道选择器的含义，并使用反射获取组件的元数据。

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

希望这会有所帮助！！

Answer 3

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

正如 Madhu Ranjan 在他的回答中已经提到的，NgModule 中有以下 3 个重要部分，即：

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

imports ：要导入此模块的模块列表。导入模块中的所有内容都可用于该模块的声明。

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

实际上，NgModule 甚至还有一个 FAQ，因为它是自（我认为）RC5 以来 angular2 架构的重大变化。

每个组件都必须是 NgModule 的一部分。它声明了应用程序的一部分，哪些功能属于彼此。你甚至可以使用 imports 部分将 NgModules 相互嵌套。

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

此外，您可以通过在内部声明它们来限制应该使用的服务的可访问性，例如另一个模块的（子）模块，仅举几个重要的特性。

查看Angular2 Docs 了解有关此内容和更多主题的更多信息。它非常详细，而且 IMO 很容易理解，因为 Angular 团队花了很多精力来保持它最新和干净（当​​你不介意搜索你需要的部分时，因为主题分组在文档）。