Angular 2中的组件是什么

Question

我是Angular的新手，对Angular JS 1.x的生成经验很少。 但是我的问题是关于Angular 2的。我在这里和https://angular.io/docs/ts/latest/guide/architecture.html阅读有关Components 信息。

我正在使用TypeScript，我的问题是：可以肯定地说Component是一个类似于Model的类（不是@component注释）（就像在Asp.Net MVC中一样），因为我们可以将html控件与组件类中定义的字段绑定在一起还是更像控制器？ 还是我想念的还有更多？

在第二个网址中有一条声明，内容为：

我们在类中定义了组件的应用程序逻辑-它支持视图的作用

上面的声明增加了我的困惑，因为我们可以在与html绑定的类中做很多事情。 在更改文本时，我们可以远程检查某些内容，或者在单击按钮时，我们可以调用方法，所有这些都可以在组件类中定义。 那么Components的限制到底是什么？ 我们可以将它们像模型或控制器一样对待吗？

请帮我澄清一下

Answer 1

实际上，组件类与您的组件实现相对应。 我的意思是您自己处理：

• 属性对应于组件状态。 可以将状态绑定到关联的模板。
• 方法对应于可以从视图触发或在组件内部使用的处理。 一些方法对应于组件生命周期的挂钩（请参阅https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html ）。

因此，组件类可以看作是Angular1控制器和范围的混合体。

@Component装饰器将使组件成为Angular2的一部分。 我的意思是涉及框架和应用程序的不同功能和机制。

可以使用不同的内容配置组件，以引用一些内容：

• 选择器
• 模板
• 输入和输出（也可以使用@Input和@Ouput进行配置
• 具体提供者
• 组件中使用的指令/组件
• 组件中使用的管道

此外，您可以看到类装饰器（ @Component装饰器是这种类型）作为一种拦截器：

• 这将使组件构造函数的参数依赖注入成为可能。
• 利用ZoneJS，它将使组件实例成为更改检测的一部分。 马克对此做了一个很棒的解释： Angular2等效于AngularJS $ watch？ 。
• 它将根据使用Reflect-Metadata配置的内容在组件实例上添加元数据。

因此， @Component Component装饰器对于配置组件并使之成为Angular2机制的一部分非常重要。

给大家的注释 ：我试图简单地描述它，这与我对事物的理解相对应，但是随时可以评论我的答案;-)

Answer 2

指令/组件取代了AngularJS（Angular 1）中的控制器，范围和指令的混合。

组件是视图和关联的视图控制器。 （指令没有视图。）组件是我们为应用程序创建视图并使用（最小）状态，数据和逻辑支持这些视图的方式。

视图是带有一些其他Angular语法的HTML模板，用于控制屏幕/显示区域。 该组件向视图公开一些（子集！）应用程序数据，并且它处理视图的UI逻辑。 数据不应归组件所有。 而是该组件应该仅引用驱动视图所需的数据。 （这类似于AngularJS中使用的最佳实践-控制器应该获取对数据的引用，而不是拥有它。）服务通常应该拥有数据。

同样，组件逻辑应限于驱动视图所需的逻辑（因此称为“视图逻辑”）。 应用程序逻辑属于服务。 其他任务也属于服务而不属于组件：验证用户输入，日志记录，与（Web）服务器交互等。

因此，组件（如AngularJS控制器）应尽可能“薄”。 他们应处理用户交互并定义为此所需的数据绑定。 他们应该集中精力支持这种观点。

当用户与应用程序交互时，Angular会根据需要创建和销毁组件。 组件具有生命周期，我们可以利用生命周期挂钩。

在我们向Angular讲述之前，组件只是一个类。 我们通过将元数据附加到类上来实现。

我发现更重要的是要知道组件中的内容，而不是组件中的内容，而不是试图确定它是“控制器”还是“模型”-这些术语如此广泛和过度使用，我认为您可以让两个开发人员就任一术语的定义达成共识。

^{上面的某些句子很可能是从Angular.io文档，博客，其他SO帖子等中复制的。我在文档中有很多关于Angular的注释，但我并不总是跟踪源引用。}