首页 > TAG信息列表 > nativeElement
Angular 组件Dom测试
文章目录 组件Dom测试createComponent()ComponentFixturenativeElementDebugElementBy.css() 组件Dom测试 组件不仅仅是一个类,它还会与 DOM 以及其它组件进行交互。我们要知道组件是否能正确渲染、是否响应用户输入和手势,或者是否集成到它的父组件和子组件中,我们需要借助Angular @ViewChild,Angular 中的 dom 操作
Angular 中的 dom 操作(原生 js) ngAfterViewInit(){ var boxDom:any=document.getElementById('box'); boxDom.style.color='red'; } 对变量定义数据类型,防止编译报错 Angular 中的 dom 操作(ViewChild) 定义模板(模板引用) <div #myattr></div> @ViewChild轮播图实现
// 计算当前图片位置 count = 0 timeset() { this.count += -100 if (this.count == -700) { this.count = 0 } } // 滑动主要函数 slide() { const imgList = this.sliderIMG.nativeElement.getElementsByTagName('li') this.timeset() for(let i=0; iAngular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法
<app-header #header></app-header><div #myBox> 我是一个dom节点</div><button (click)="getChildRun()">获取子组件的方法</button> /*ViewChild获取dom节点 1、模板中给dom起一个名字 <div #myBox> 我是一个dom节点 </div>Angular 自定义拖拽指令
指令 组件是一种带模版的指令。指令是超级。 结构型指令(改变布局)和属性型指令(改变外观和行为)。 Renderer2和ElementRef Angular不提倡直接操作DOM 对于DOM的操作应该通过Renderer2进行。 ElementRef是指向DOM元素的引用 拖拽指令实例 1、新建directive module $ ng g m directiveC