标签:获取 wip 操作dom class imp ons script api 天才
angular2不推荐操作dom,但是实际应用中不可避免的需要使用到dom操作,怎么操作,官方文档提供了一系列api(ElementRef,
ViewContainerRef ,
TemplateRef
)配合
<div class="swiper-wrapper" #bannersEL></div>
接着在模板对应的组件类中,使用组件中元数据@ViewChild来获取模板局部变量的读写权限:
export class DemoComponent implements AfterViewInit {
@ViewChild("bannersEL") bannersEl: ElementRef; ngAfterViewInit(): void { console.log(this.bannersEl); } }
其中 @ViewChild("bannersEL") bannersEl: ElementRef 还可以使用如下语法限定局部变量的权限:
@ViewChild("bannersEL",{read:ElementRef}) bannersEl: ElementRef;
还需要注意点,this.bannersEl 对象获取模板局部变量时机,仅在ngAfterViewInit生命周期之后才,也就是说在组件构造器,及onint等生命周期时是获取不到的。
然后还有一个最坑人的一点#bannersEL 模板局部变量最好写在html元素的最前面,像上面那样在模板标签中定义模板局部变量,居然会导致组件中获取不到,目前还不知道原因为何,正确写法如下
<div #bannersEL class="swiper-wrapper">
标签:获取 wip 操作dom class imp ons script api 天才
原文地址:http://www.cnblogs.com/xuzimian/p/7267584.html