Question

我目前正在将某些ng 1.X元素指令迁移到1.5＆＃34;组件＆＃34;格式。

我的指示全部在＆＃34;替换：true＆＃34;模式，其中很多都有类似＆＃34; ng-class＆＃34;或者＆＃34; ng-click＆＃34;在指令的根元素上。

使用新的.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（）通知整个应用程序可能的更改

Angularjs 1.X相当于Angular 2 HostBinding和HostListener

1 个答案: