Angularjs 1.X等效於Angular 2 HostBinding和HostListener

Question

我目前正在將ng 1.X元素指令遷移到1.5“組件”格式。

我的指令全部處於“ replace：true”模式，並且其中許多指令的根元素上都有諸如“ ng-class”或“ ng-click”之類的東西。

使用新的.component（）格式，將replace強制設置為false（例如在ng2中）。 但是在ng2中，有諸如HostBinding和HostListener之類的東西可以與組件的根元素進行交互。

ng1組件中與HostBinding的正確等效項是什么？

Answer 1

這是通過$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（）的偵聽器回調中執行提供的方法，以通知整個應用程序可能的更改