1.直接获取dom节点
//< div >wo shi yi ge div< /div>
//< div ngfor ngif…>w o s hi yi ge div</ div >
第一种可以直接在ngOnInit(){}中直接获取,第二种不可以
**ngOnInit(){}**组件和指令初始化完成,并不是真正的dom加载完成
ViewChild
2.通过ViewChild获取dom节点,ngAfterViewInit()里面写
两种都可以获取,
//<div #box> 获取DOM节点</ div>
@Component({
selector: ‘app-dom’,
templateUrl: ‘./dom.component.html’,
styleUrls: [’./dom.component.css’]
})
export class DomComponent implements OnInit {
//获取dom节点
@ViewChild(‘box’,{static:true}) mybox:any;
//调用子组件
@ViewChild(‘domson’,{static:true}) mydomson:any;
constructor() { }
ngOnInit() {
}
ngAfterViewInit(): void {
console.log(this.mybox);
this.mybox.nativeElement.style.width='50px';
this.mybox.nativeElement.style.height='50px';
this.mybox.nativeElement.style.backgroundColor='red';
//调用子组件的方法
this.mydomson.run();
}
}
3.ViewChild还可以调用子组件