angular 1.5 中的组件和指令 [英] Components and directives in angular 1.5

问题描述

Angular 1.5 中的重大功能变化围绕着对 组件.

The big feature changes in Angular 1.5 are surrounding the support of 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 中的组件是否相同?

While this is all good, I am not sure how this differs from directives. What are the benefits of using components over traditional custom directives? And are components in Angular 1.5 and Angular 2 the same?

推荐答案

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

The .component is now preferred way of writing code because it favors good practices and gives developers ability to write code like in angular 2 (similar to Web Components). Basically, when you write code using component, upgrading to angular 2 will be easier. Functionalities remains almost the same. You should use .component always when it is possible.

更改(摘录)

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

• component is declared using object instead of function
• simplified isolated scope using binding property
• components are always with isolated scope
• some bad practices will not be possible
• simpler, easier to understand configuration
• lifecycle hooks: ($onInit(), $onChanges(changesObj), $doCheck(), $onDestroy(), $postLink())

很棒的文章在这里:https://toddmotto.com/exploring-the-angular-1-五组分法

何时不使用组件(来自文档):

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

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

I believe, that the best description you can find is official guide: https://docs.angularjs.org/guide/component. It covers all changes, reasons for changes and gives you deep understanding of the components.

编辑 01-2020:

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

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

At the point of writing response (01-2017), impression that they are going to replace directives in most scenarios was correct. I removed a word "replaced" from the answer in 06-2017, because it is was indeed misleading at that point in time. However, since 1.5 you should still prefer components over directives when possible.

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

Actually, you should prefer not to use AngularJS at all. It is now in LTS and basically, only errors will be fixed. No new features. Also, LTS ends on 01-07-2021. https://docs.angularjs.org/misc/version-support-status#long-term-support

附注.使用组件代替指令可以让代码在未来更容易移植到 ngx.

PS. Using component instead of directive makes the code easier to port to ngx in the future.

这篇关于angular 1.5 中的组件和指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！