如何实例化和渲染 Angular2 组件？

Question

我正在尝试学习 angular2（和 Typescript），并按照快速入门指南和一些非官方教程进行操作，我已经取得了一些进展，有了一个包含一些组件的简单应用程序。

我了解在我的模板中使用方括号表示法将模型数据绑定到 DOM 元素的过程：<h1>{{title}}</h1>

我很难理解的是如何从我的 Typscript 代码中动态实例化一个新组件，然后在 DOM 中呈现它。

如果我将一个组件导入我的文件并实例化一个新组件，这将触发模型中组件的构造函数。 Angular2 是否允许我渲染它，或者将一个组件附加到另一个组件或查询的 div 元素？

import {ListComponent} from './list.component';
...
export class MainAppComponent {

    buttonClicked(){
        // I'm creating a new list component. What is the proper way to render it within this MainAppComponent?
        this.list = new ListComponent();
    }
}

Answer 1

您缺少Angular2 的许多概念。在 Angular 中，您不会自己实例化组件并将它们添加到 DOM，Angular 会处理所有事情，模式是：

• 拥有一个包含模板的父组件
• 拥有一个包含选择器的子组件
• 您在父组件中导入并添加子组件选择器 组件模板
• 子组件在父组件内部渲染

这里要问的东西太多了，需要关注Angular2 tutorial HERE，再关注Angular2 basics docs HERE