Question

我一直在阅读关于Angular 1.5中新.component()帮助器的最新article，这应该可以帮助每个人最终迁移到Angular 2。一切看起来都很简单，但我找不到任何有关组件内DOM操作的信息。

但是有一个template属性，它可以是一个函数并接受$element和$attrs个参数。我还不清楚这是否是link功能的替代品。它似乎不是这样。

Answer 1

EDIT 2/2/16： 1.5文档现在涵盖了组件：https://docs.angularjs.org/guide/component

基于某些阅读的一些想法（链接如下）：

组件不是指令的替代品。组件是一种特殊类型的指令，它使用模板组织控制器。
组件没有链接功能，控制器仍然不能处理DOM操作。
如果您需要DOM操作，您的组件可以在链接函数中使用包含该DOM操作的其他指令。

我花了一段时间来弄清楚这一点，但是一旦我做了它就有了一些意义：组件是指令，但并非所有指令都是 - 或者需要 - 组件。

当我认为组件正在替换指令时，关于链接函数的问题是一个自然的问题，或者对我而言。为什么？因为我们已经被教导将DOM操作放在指令的链接函数中：“想要修改DOM的指令通常使用链接选项来注册DOM侦听器以及更新DOM。” https://docs.angularjs.org/guide/directive

如果你正在运行那个假设（组件替换指令），那么你会发现Angular文档没有回答这个问题，因为一旦你知道组件的用途，它就不是正确的问题。（组件在$compileProvider documentation而非directive documentation中描述。）

背景阅读

我上面所说的实际上是对Todd Motto在组件和指令中可能是最好的讨论（到目前为止）所说的内容的重写：

https://www.reddit.com/r/angularjs/comments/3taxjq/angular_15_is_set_to_introduce_the_component/

将这些评论纳入更一般的文章可能会有用。

关于组件的大多数文章都没有提到链接功能（这并不意味着这些不是优秀的文章）：

https://toddmotto.com/exploring-the-angular-1-5-component-method/

https://medium.com/@tomastrajan/component-paradigm-cf32e94ba78b#.vrbo1xso0

https://www.airpair.com/angularjs/posts/component-based-angularjs-directives

或者当提到链接功能时，它在括号中：

http://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html

One article说组件“使用控制器而不是链接功能。”但这不是“反而”的情况：控制器不是链接功能的替身。

Answer 2

这使得以类似于使用Web组件或使用Angular 2的应用程序架构风格的方式编写应用程序变得更加容易。

组件的优点：

比普通指令更简单的配置提升了理智的默认值和针对基于组件的体系结构编写优化的最佳实践组件指令可以更容易地升级到Angular 2

何时不使用组件：

用于依赖DOM操作的指令，添加事件侦听器等等，因为你的编译和链接功能不可用需要高级指令定义选项，如优先级，终端，当你想要一个由a触发的指令时，多元素属性或CSS类，而不是元素

Answer 3

更新（2017年8月22日）： $ inject是在AngularJS中执行此操作的推荐方法。阅读风格指南： Styleguide link和AngularJS文档：AngularJS docs

要在组件中使用DOM绑定而不是使用链接功能创建指令，您可以在控制器功能中注入“$ element”或其他服务，例如

app.component('pickerField', {
    controller: PickerField,
    template: '<span>Your template goes here</span>'
  });

  PickerField.$inject = ['$element'];

  function PickerField(element) {
    var self = this;
    self.model = self.node.model;
    self.open = function() {
      console.log('smth happens here');
    };
    element.bind('click', function(e) {
      console.log('clicked from component', e);
      self.open();
    });
  }

Answer 4

好的，所以看起来控制器现在是适合它的地方，因为它是唯一可能的控制器。另外，我们不能在组件助手中使用replace选项。

Answer 5

可以使用最新角度的$ postLink（）函数。

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

类似于后链接功能，此钩子可用于设置DOM 事件处理程序，并直接进行DOM操作。

Answer 6

根据目前的Angular2文档（参见https://github.com/angular/angular/blob/master/modules/angular2/docs/core/02_directives.md），Angular2中仍会有指令。所以基本上你可以使用@Directive或@Component，其中：

指令对封装行为非常有用。
Component是一个使用shadow DOM创建封装视觉行为的指令。组件通常用于创建UI小部件或将应用程序分解为更小的组件。

所以根据这个，如果你需要DOM操作，你需要使用@Directive，因此在Angular 1.x中使用Angular.directive。可以使用host属性完成事件绑定。关于DOM操作本身，仍然缺少文档（例如https://github.com/angular/angular/blob/master/modules/angular2/docs/core/09_compilation.md或https://github.com/angular/angular/blob/master/modules/angular2/docs/core/08_lifecycle.md），但您可以按https://stackoverflow.com/a/32062065中的建议查找Lifecycle。

作为简短的回答，使用Angular 1.5+，如果您有DOM访问权限，请继续使用angular.directive，否则请封装到angular.component。同时尽量减少$scope对非dom事件的使用，并更喜欢RxJS，请参阅https://medium.com/front-end-developers/managing-state-in-angular-2-using-rxjs-b849d6bbd5a5#.obgb6dl6n，

Angular 1.5组件与旧指令 - 哪里是链接功能？

6 个答案:

背景阅读