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

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

改为使用如下绑定：

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

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

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

Answer 2

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

注意：视图子名称必须以myName开头，并且在模板中需要#。

DOM 操纵属于 Angular 2 的什么地方？

Where does DOM manipulation belong in Angular 2?

angular

dom-manipulation