Thao tác DOM ở đâu trong Góc 2?

Question

Trong Angular 1 tất cả các thao tác DOM nên được thực hiện trong các chỉ thị để đảm bảo kiểm tra thích hợp, nhưng những gì về Angular 2? Điều này đã thay đổi như thế nào?

Tôi đã tìm kiếm các bài viết hay bất kỳ thông tin nào về vị trí đặt thao tác DOM và cách suy nghĩ khi thực hiện nó, nhưng mỗi lần tôi lại trống rỗng.

Hãy thành phần này ví dụ (điều này thực sự là một chỉ thị nhưng chúng ta hãy giả vờ rằng nó không phải):

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; 
    } 
} 

Có ràng buộc sự kiện thuộc về một nhà xây dựng chẳng hạn, hoặc điều này nên được đặt trong ngAfterViewInit chức năng hay ở đâu khác? Nếu bạn cố gắng phá vỡ thao tác DOM của một thành phần thành một chỉ thị?

Tất cả chỉ là một hiện tượng mờ tại thời điểm này nên tôi không chắc chắn rằng tôi đang thực hiện chính xác và tôi chắc chắn rằng tôi không phải là người duy nhất.

Quy tắc cho thao tác DOM trong Angular2 là gì?

Answer 1

Thao tác DOM trực tiếp nên tránh hoàn toàn trong Angular2.

Sử dụng thay vì các ràng buộc như:

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

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

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

Answer 2

Dựa trên đề nghị giải pháp bởi nhà phát triển: 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: Tên xem đứa trẻ có để bắt đầu với Tên của tôi và trong mẫu bạn cần #.