angular 1.5 中的组件和指令

Question

Angular 1.5中的重大功能变化围绕着组件的支持。

component('myComponent', {
  template: '<h1>Hello {{ $ctrl.getFullName() }}</h1>',
  bindings: { firstName: '<', lastName: '<' },
  controller: function() {
    this.getFullName = function() {
      return this.firstName + ' ' + this.lastName;
    };
  }
});

虽然这一切都很好，但我不确定这与指令有何不同。 与传统的自定义指令相比，使用components有什么好处？ Angular 1.5 和 Angular 2 中的组件是否相同？

Answer 1

.component 不会像@rek Żelechowski 所说的那样替换 .directive。 所以..

.component() 没有什么是 .directive() 做不到的。 它旨在简化我们创建“组件”的方式——大致意思是 UI 指令。

什么时候可以/应该使用它？

显然，在某些情况下您不能/不应该使用它：

• 如果您需要链接功能（尽管您很少需要）
• 如果你想要一个无模板指令，例如没有模板或单独作用域的 ng-click

对于所有其他指令，这应该有效。 而且因为它节省了样板文件并且不易出错，所以使用起来更好。

尽管有很多新东西，但 .component() 不能完全取代 .directive()。

Answer 2

.component现在是编写代码的首选方式，因为它有利于良好实践，并使开发人员能够像 angular 2 一样编写代码（类似于 Web Components）。 基本上，当您使用component编写代码时，升级到 angular 2 会更容易。 功能几乎保持不变。 如果可能，您应该始终使用.component 。

变化（摘录）

• 组件是使用对象而不是函数来声明的
• 使用binding属性简化隔离范围
• 组件总是具有独立的作用域
• 一些不好的做法是不可能的
• 更简单，更容易理解的配置
• 生命周期钩子: ( $onInit() , $onChanges(changesObj) , $doCheck() , $onDestroy() , $postLink() )

很棒的文章在这里： https : //toddmotto.com/exploring-the-angular-1-5-component-method

何时不使用组件（来自文档）：

• 对于需要在编译和预链接函数中执行操作的指令，因为它们不可用
• 当您需要高级指令定义选项时，例如优先级、终端、多元素
• 当你想要一个由属性或 CSS 类而不是元素触发的指令时。

我相信，您能找到的最佳描述是官方指南： https : //docs.angularjs.org/guide/component 。 它涵盖了所有更改、更改原因并让您深入了解组件。

编辑 01-2020：

至少一年后我不再使用 ng1 代码了

在撰写响应时（01-2017），他们将在大多数情况下替换指令的印象是正确的。 我从 06-2017 的答案中删除了“replaced”这个词，因为它在那个时间点确实具有误导性。 但是，从 1.5 开始，您仍然应该尽可能选择组件而不是指令。

实际上，您根本不应该使用 AngularJS。 它现在处于 LTS 中，基本上，只会修复错误。 没有新功能。 此外，LTS 将于 01-07-2021 结束。 https://docs.angularjs.org/misc/version-support-status#long-term-support

附注。 使用组件而不是指令使代码在将来更容易移植到 ngx。

Answer 3

指令不会被替换，它们只是由于各种原因而被更改，这些原因可能有点太多了，无法进入这里。 angular 文档很好地解释了它们，因此您可以开始查看那里的文档：

https://docs.angularjs.org/guide/component

为了更好地了解指令和组件之间的区别，我发现最好参考 Angular 2.0 文档。 Angular 1.5 为我们提供了通往 2.0 的桥梁，而 1.4 和之前的版本则没有。 一个较大的变化是删除 $scope，另一个是提供组件作为构建事物的一种方式（在 Angular 2.0 中高度使用）。

总而言之，变化的主要内容是它为 1.X 世界迁移到 2.X 世界做好了准备。 在那个世界中有组件（它们是元素级指令的核心）、结构指令和属性指令。 请参阅以下链接以帮助理解每个链接（以及上面提供的链接）。

http://learnangular2.com/components/

https://angular.io/docs/ts/latest/guide/structural-directives.html

https://angular.io/docs/ts/latest/guide/attribute-directives.html