无奈接手了一个旧项目,上一个老哥在角项目中大量使用了JQuery来操作DOM,真的是太不讲究了。那么如何优雅的使用角的方式来操作DOM呢?
1, ElementRef ——安康;,一个包装一个本地元素的内部视图。
在组件的,构造函数中注入ElementRef,可以获取到整个组件元素的包裹。
@ component ({
选择器:“app-test-page”,
templateUrl:“。/test-page.component.html”,
styleUrls (“。/test-page.component.scss”):
}）
出口类TestPageComponent实现alt="详解角如何正确的操作DOM ">
ElementRef中的nativeElement即是组件最外层的DOM元素。再通过原生的DOM定位方式,即可获取到指定的选择器元素。
getDomTest () {
console.dir (this.el.nativeElement.querySelector (' .test-get-dom '));//获取指定的子元素
}
2, @viewChild (),——安康;您可以使用ViewChild才能得到第一个元素或指令匹配选择器,查看DOM。
@viewChild可以获取指定的元素,指定的方式可以是本地变量或者组件类型;
//HTML
& lt; div类=皌ip-test-wrapper”比;//本地变量绑定按钮按钮
& lt;按钮类=" test-get-dom " # testdom(点击)=癵etDomTest()在测试获取DOM
& lt;/div>//对话框组件
& lt; app-dialog> & lt;/app-dialog>//ts
从“进口{DialogComponent}。/. ./. ./共同/组件/对话框/dialog.component ';
@ component ({
选择器:“app-test-page”,
templateUrl:“。/test-page.component.html”,
styleUrls (“。/test-page.component.scss”):
}）
出口类TestPageComponent实现alt="详解角如何正确的操作DOM ">
备注:ElementRef或者@viewChild获取元素,一定要在,ngAfterViewInit周期之后再使用。
3, @viewChildren,,您可以使用ViewChildren的{@link QueryList}从景观DOM元素或指示。
@viewChild会返回符合条件的第一个元素,如果需要获取多个符合条件的元素呢? @viewChildren会返回所有符合条件的元素的列表。指定选择器的方式与@viewChild一致。
//复制一个元素
& lt; div类=皌ip-test-wrapper”比;
& lt;按钮类=" test-get-dom " # testdom(点击)=癵etDomTest()在测试获取DOM
& lt;/div>
& lt; div类=皌ip-test-wrapper”比;
& lt;按钮类=" test-get-dom " # testdom(点击)=癵etDomTest()在测试获取DOM
& lt;/div>
& lt;/div>
& lt; app-dialog> & lt;/app-dialog>
& lt; app-dialog> & lt;/app-dialog>//ts
从“进口{DialogComponent}。/. ./. ./共同/组件/对话框/dialog.component ';
@ component ({
选择器:“app-test-page”,
templateUrl:“。/test-page.component.html”,
styleUrls (“。/test-page.component.scss”):
}）
出口类TestPageComponent实现alt="详解角如何正确的操作DOM ">
在获取dom之后,如何对dom进行操作呢?原生的domAPI是一种选择,但是角提供了更好的跨平台方式,Renderer2。
引入 Renderer2 ,然后在构造中注入。
进口{组件,alt="详解角如何正确的操作DOM ">
通过elementRef或者@viewChild @viewChildren获取元素,再通过renderer2提供的API来操作元素,不过记得在不要在ngAfterViewInit周期之前使用。通过角提供的方式,可以满足大部分的操作DOM的需求了。如果有特殊的场景,当然还是原生DOM撸起来呀
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
