DOM操作在哪里属于Angular 2?

时间:2016-05-22 15:54:03

标签: angular dom-manipulation

在Angular 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操作的规则是什么?

2 个答案:

答案 0 :(得分:16)

基于开发人员推荐的解决方案:http://angularjs.blogspot.de/2016/04/5-rookie-mistakes-to-avoid-with-angular.html

@Component({
  selector: 'my-comp',
  template: `
    <div #myContainer>
    </div>
  `
})
export class MyComp implements AfterViewInit {
  @ViewChild('myContainer') container: ElementRef;

  constructor() {}

  ngAfterViewInit() {
    var container = this.container.nativeElement;
    console.log(container.width); // or whatever
  }
}

注意:视图子名称必须以我的名称开头,并且在您需要的模板中#。

答案 1 :(得分:11)

应该完全避免在Angular2中使用直接DOM操作。

使用类似的绑定:

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

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

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