Dove si trova la manipolazione DOM in Angular 2?

Question

In Angular 1 tutte le manipolazioni del DOM devono essere eseguite in direttive per garantire un'adeguata testabilità, ma per quanto riguarda Angular 2? Come è cambiato?

Sono stato alla ricerca di buoni articoli o di qualsiasi informazione su dove mettere la manipolazione DOM e su come pensare quando lo si fa, ma io vengo vuoto ogni volta.

Prendete questa componente, ad esempio (questo è davvero una direttiva, ma facciamo finta che non è):

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

Vuol vincolante evento appartengono in un costruttore per esempio, o questo dovrebbe essere messo in funzione ngAfterViewInit o altrove? Dovresti provare a scomporre la manipolazione del DOM di un componente in una direttiva?

Al momento è tutto solo un offuscamento quindi non sono sicuro di averlo fatto correttamente e sono sicuro di non essere l'unico.

Quali sono le regole per la manipolazione DOM in Angular2?

Answer 1

La manipolazione diretta DOM deve essere evitata interamente in Angular2.

Utilizzare invece binding come:

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

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

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

Answer 2

Sulla base di consigliare la soluzione dagli sviluppatori: 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 
    } 
} 

Attenzione: Il nome della vista bambino deve cominciare con mia Nome e nella modello di cui hai bisogno #.