在角度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操作的规则是什么？
解决方法
直接DOM操作应该完全在Angular2中避免.
改用绑定如：
export class MyComponent {
constructor() {
this.setHeight();
}
@HostBinding('style.height.px')
height:number;
@HostListener('window:resize',['$event'])
setHeight() {
this.height = window.innerHeight;
}
}
