如何在 Angular 4 中创建组件定义类的实例？答案

【问题标题】：How to create instance of component definition class in angular 4?如何在 Angular 4 中创建组件定义类的实例？
【发布时间】：2017-10-31 07:26:47
【问题描述】：

我是 Angular 4 的新手，我每天都在使用教程学习它，但经过大量研究后我不明白如何创建组件类的实例。

这是我正在关注的示例代码

export class UserItemComponent implements OnInit {
 name: string; // <-- added name property

   constructor() {
    this.name = 'Felipe'; // set the name
   }

   ngOnInit() {
   }

}

我正在像这样渲染这个组件/user-item.component.html

<p>
 Hello {{ name }}
</p>

然后是 /app.component.html 文件

<app-user-item></app-user-item>

它正确显示名称“Felipe”，但我不明白它是如何工作的。我知道在创建实例时正在调用构造函数，但我不知道下面的实例是哪一个？

<app-user-item></app-user-item>
{{ name }}

我非常了解 oop 概念，但在角度方面，我仍然对其术语和流程感到困惑。任何帮助将不胜感激。谢谢。

【问题讨论】：

尝试阅读：angular.io/guide/architecture
@methgaard 感谢您的回复。我已经阅读了这篇文章，但它是根据英雄编辑器编写的，我没有关注英雄编辑器。我只是按照简单的方法，你能根据我的问题回答我吗？
不清楚到底是什么问题。它的标题是“如何在 Angular 4 中创建组件定义类的实例？” - 当您使用“”时，角度会为您服务。然后你有“我知道实例创建时正在调用构造函数，但我不知道下面的实例是哪一个？”这不是一个真正的问题，一般来说，每次您的 html 中有“”时，Angular 都会创建组件的新实例。
为什么问题不清楚？ oop 的一个主要方面是定义类并相应地实例化对象。对象具有与程序的其余部分通信的方法（在类中定义），例如使用简单的 getter 或 setter。从角度来看，模板似乎直接与类变量交互（不好的做法），因为从不接触实例。但是，我知道Component Interaction，但这肯定不是 oop 背后的想法。对我来说，Angular 开发人员似乎未能实现 oop 的这个属性。还是？

标签： javascript angular oop

【解决方案1】：

@Antikhippe 当你的应用程序加载时，它会渲染一个 app.component.html 视图。在您的情况下，视图正在呈现另一个具有这段代码的视图“”

你好{{姓名}}

” 当 Angular 看到 {{ ...}} 时，它知道您正在引用组件中大多数时间 .ts 中可用的属性。这个概念就是角度所说的“数据绑定”。您可以在组件文件夹中的单独文件（.ts）中创建一个类，在组件类中导入该类并实例化该类的对象，就像在 java 中一样：“this.model = new SubjectInfo();” “this”与所有 OOP 中的含义相同，它引用组件类的属性。 “SubjectInfo”是我在组件类中导入的类。我希望有帮助。

【讨论】：