角度2和组件树

Question

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

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

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

我的意思是，我们从不在角度组件中说明组件将在其中，除了模板中的。

例如，我从未在 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

使用Augury。你会得到一个明确的见解。

Answer 2

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

使用@NgModule，

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

  

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

     

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

     

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

使用这个知识Angular知道什么选择器意味着什么，并使用Reflection它获得组件的元数据。

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

希望这有帮助!!

Answer 3

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

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

  

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

     

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

     

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

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

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

正面部分IMO是您可以使用此结构很好地组织应用程序，因为每个角度模块都有自己的路由配置。

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

查看Angular2 Docs以获取有关此主题和更多主题的更多信息。它非常详细，IMO很容易理解，因为有角度的团队花了很多精力保持它的最新和清洁（当你不介意搜索你需要的部分，因为主题分组是有点蹩脚的文档）。