Question

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

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现在是编写代码的首选方式，因为它有利于良好实践，并使开发人员能够编写类似于角度2的代码（类似于Web组件）。基本上，当您使用component编写代码时，升级到角度2将更容易。功能性几乎保持不变。您应该尽可能使用.component 始终。

更改（摘录）

使用object而不是function
使用binding属性
组件始终具有隔离范围
一些不良做法是不可能的
更简单，更易于理解配置
生命周期挂钩：（$onInit()，$onChanges(changesObj)，$doCheck()，$onDestroy()，$postLink()）

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

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

用于需要在编译和预链接函数中执行操作的指令，因为它们不可用

当您需要高级指令定义选项时，例如priority，terminal，multi-element

当您需要由属性或CSS类而不是元素触发的指令时。

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

Answer 2

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

使用.directive（）无法对.component（）执行任何操作。它旨在简化我们创建“组件”的方式 - 这大致意味着UI指令。

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

显然，有些情况下你不能/不应该使用它：

如果您需要链接功能（尽管您很少应该这样做）
如果您需要无模板指令，例如ng-click没有模板或单独的范围

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

尽管有各种新的好东西，.component（）无法完全取代.directive（）。

Answer 3

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

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

角度1.5的组件和指令

3 个答案: