javascript - Angularjs 1.X等效于Angular 2 HostBinding和HostListener

我目前正在将ng 1.X元素指令迁移到1.5“组件”格式。

我的指令全都处于“ replace：true”模式，并且其中许多指令的根元素上都有诸如“ ng-class”或“ ng-click”之类的东西。

使用新的.component（）格式，将replace强制设置为false（例如在ng2中）。但是在ng2中，有诸如HostBinding和HostListener之类的东西可以与组件的根元素进行交互。

ng1组件中与HostBinding的正确等效项是什么？

最佳答案

这是通过$element和$scope控制器本地依赖项完成的。

function SomeComponentController($scope, $element) {
  var self = this;

  $scope('$ctrl.foo', function (foo, oldFoo) {
    if (foo === oldFoo)
      return;

    // @HostBinding('bar') foo;
    self.bar = foo;

    // @HostBinding('attr.bar') foo;
    $element.attr('bar', foo);

    // @HostBinding('class.bar') foo;
    $element.toggleClass('bar', !!foo);
  });

  // @HostListener('click') onClick() {...}
  $element.on('click', function () {
    $scope.$evalAsync(self.onClick);
  });

  self.onClick = function () {...}.bind(self);
}

如果您想简化将来从AngularJS到Angular的过渡，应该注意ng-metadata应该在1.x TypeScript项目中紧密复制Angular 2+ API。

它包含上述装饰器的实现，还提供有关幕后情况的注释：

@HostBinding


  只需在提供的控制器属性上创建$ scope。$ watch并通过使用的类型classname（toggleClass）/ attribute（attr）/ property（setPathValue）更改DOM


@HostListener


  通过.on（eventName）手动在主机元素上注册事件侦听器，并在包含＃scope。$ applyAsync（）的侦听器回调中执行提供的方法，以通知整个应用程序可能的更改