在Angular 2中，DOM操作属于哪里？
在Angular 2中，DOM操作属于哪里？
提问于 2016-05-22 23:54:03
在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的规则是什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-05-23 00:03:20
在Angular2中应该完全避免直接的DOM操作。
取而代之的是绑定：
export class MyComponent {
constructor() {
this.setHeight();
}
@HostBinding('style.height.px')
height:number;
@HostListener('window:resize', ['$event'])
setHeight() {
this.height = window.innerHeight;
}
}Stack Overflow用户
发布于 2016-07-01 22:42:42
基于开发人员推荐的解决方案：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开头，并且在模板中必须以#开头。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37376442
复制相关文章
相似问题
腾讯云开发者
