web-dev-qa-db-ja.com

DOM操作はAngular 2？

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操作のルールは何ですか？

angulardom-manipulation
16
Chrillewoodz

Angular2では、直接DOM操作を完全に回避する必要があります。

代わりに次のようなバインディングを使用します。

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

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

  @HostListener('window:resize', ['$event'])
  setHeight() {
    this.height = window.innerHeight;
  }
}
12
Günter Zöchbauer

開発者による推奨ソリューションに基づく： 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
  }
}

Attention：ビューの子名はmyNameで始まり、必要なテンプレート＃。

16
Johannes