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

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

1 个答案: