Angular 2中的组件是什么？

Question

Angular 2中的组件是什么？

6

我对Angular很陌生，对Angular JS 1.x的使用经验非常少。但是我的问题是关于Angular 2的。我在这里阅读了有关组件的内容，以及https://angular.io/docs/ts/latest/guide/architecture.html

我正在使用TypeScript，我的问题是：是否可以说Component是一个类（而不是@component注释），类似于Model（如Asp.Net MVC中的模型），因为我们可以将html控件与定义在组件类中的字段绑定，或者更像控制器？还是我缺少更多的东西？

第二个URL中有一句话，它说：

我们在一个类内定义组件的应用逻辑-支持视图所做的事情

上述语句增加了我的困惑，因为我们可以在与html绑定的类中执行许多操作。在文本更改时，我们可以远程检查某些内容，或者在按钮单击时调用方法，所有这些都可以在组件类中定义。那么组件的限制到底是什么？我们可以将它们视为模型或控制器或两者兼而有之吗？

请帮助我澄清这个问题

- shrekDeep

1

请阅读这篇文章，其中描述了组件和装饰器的区别和解释。 - Pankaj Parkar

2个回答

1

指令/组件替代了AngularJS（Angular 1）中控制器、作用域和指令的混合使用。

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

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

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

因此，组件（如AngularJS控制器）应尽可能“瘦”。它们应处理用户交互并定义所需的数据绑定。它们应专注于支持视图。

Angular会根据用户与应用程序的交互情况创建和销毁组件。组件具有生命周期，我们可以利用生命周期钩子进行操作。

一个组件只是一个类，直到我们告诉Angular它的存在。我们通过将元数据附加到类来实现这一点。

我认为更重要的是知道什么属于组件，什么不属于组件，而不是试图确定它是“控制器”还是“模型”——这些术语非常广泛和过度使用，我认为您无法让两个开发人员就其中任何一个术语的定义达成一致。

以上部分内容可能来自Angular.io文档、博客、其他SO帖子等。我在文档中有一堆关于Angular的笔记，并不总是跟踪来源参考。

- Mark Rajcok

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thierry Templier · Accepted Answer

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

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

因此，组件类可以被视为 Angular1 控制器和作用域的混合体。

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

它可以使组件配置具有不同的东西，列举一些如下：

- 选择器 - 模板 - 输入和输出（也可以使用 @Input 和 @Output 进行配置） - 特定的提供者 - 在组件中使用的指令 / 组件 - 在组件中使用的管道

此外，您可以将类装饰器（@Component 装饰器属于此类型）视为一种拦截器：

它将使组件构造函数的参数能够进行依赖注入。
它将使组件实例成为变更检测的一部分，利用 ZoneJS。Mark 在这方面做出了很好的解释：What is the Angular2 equivalent to an AngularJS $watch?。
它将根据使用 Reflect-Metadata 配置的内容向组件实例添加元数据。

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

注意事项：我试图简单地描述这个问题，这是我理解的事情，但请随时评论我的答案；-)