DOM操作在哪里属于Angular 2？

Question

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

Answer 1

基于开发人员推荐的解决方案: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
  }
}

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

Answer 2

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

使用相反的绑定,如:

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

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

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