DOM操作属于Angular 2？

发布时间：2020-12-14 18:50:10 所属栏目：资源来源：网络整理

导读：在角度1中,所有的DOM操作都应该在指令中进行,以确保正确的可测试性,但是Angular 2呢？如何改变？我一直在搜索好的文章或任何信息,关于在哪里放置DOM操作和如何思考,但我每次都是空的. 以这个组件为例(这真的是一个指令,但假装不是这样)： export class MyCo

在角度1中,所有的DOM操作都应该在指令中进行,以确保正确的可测试性,但是Angular 2呢？如何改变？

我一直在搜索好的文章或任何信息,关于在哪里放置DOM操作和如何思考,但我每次都是空的.

以这个组件为例(这真的是一个指令,但假装不是这样)：

export class MyComponent {

  constructor(private _elementRef: ElementRef) {

    this.setHeight();

    window.addEventListener('resize',(e) => {
      this.setHeight();
    });
  }

  setHeight() {
    this._elementRef.nativeElement.style.height = this.getHeight() + 'px';
  }

  getHeight() {
    return window.innerHeight;
  }
}

事件绑定是否属于构造函数,例如,还是应该放在ngAfterViewInit函数或其他位置？您应该尝试将组件的DOM操作分解为指令吗？

这一切都只是一个模糊,所以我不知道我正在做正确的事情,我相信我不是唯一的.

Angular2中DOM操作的规则是什么？

解决方法

直接DOM操作应该完全在Angular2中避免.

改用绑定如：

export class MyComponent {
  constructor() {
    this.setHeight();
  }

  @HostBinding('style.height.px')
  height:number;

  @HostListener('window:resize',['$event'])
  setHeight() {
    this.height = window.innerHeight;
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!