Angular如何获取ngIf渲染的Dom元素
本篇文章和大家了解一下Angular如何获取ngIf渲染的Dom元素。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
Angular获取普通Dom元素的方法
通过模板变量名获取
import { Component, ViewChild, AfterViewInit } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h2>Welcome to Angular World</h2>
<p #greet>Hello {{ name }}</p>
`,
})
export class AppComponent {
name: string = 'Semlinker';
@ViewChild('greet')
greetDiv: ElementRef;
ngAfterViewInit() {
console.log(this.greetDiv.nativeElement);
}
}但我发现用这种方法获取ngIf渲染的元素时得到的是undefined
<div *ngIf="isButtnGrop" (click)="dropBtnClick($event)">
<div cdkDropList #dropList [cdkDropListConnectedTo]="_connectableDropLists" (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of itemDatas" (click)="onItemClick($event,item)" cdkDrag
(cdkDragStarted)="startDragging($event)" [cdkDragData]="{ item }">
</div>
</div>
</div>将static改成false 获取
@ViewChild('dropList', { read: CdkDropList, static: false }) dropList: CdkDropList;
ngAfterViewInit(): void {
if (this.dropList) {
console.log(this.dropList)
}
}通过这个也是实现了一个buttonGroup拖拽button到 列表的功能，列表的button也能拖拽到 buttonGroup
用的也是Angular自带的 cdk/drag-drop
import { CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';自己实现的思路
官网的文档和demo比较简单，没有讲到跨组件的实现，简单记录一下自己实现的思路。
将需要拖拽的元素加入cdkDropList，并且在A组件和B组件都初始化的时候获取到需要拖拽的dom元素，将他们各自注册到store中，带上特殊的componentId。
A、B组件加上cdkDropListConnectedTo 这决定着组件可以跨组件拖动到哪里，用_connectableDropLists变量。同样的，在页面初始化时，通过rxjs的流订阅特殊的componentId,去获取到当有拖拽list注册到store中时的变化，并且赋值给_connectableDropLists数组。
const parentId = this.storeService.getProperty(this.pageId, this.componentId, 'parentId');
this.dragDropService.getDragListsAsync(this.pageId, parentId.value)
.pipe(takeUntil(this.destroy))
.subscribe(dropLists => {
this._connectableDropLists = dropLists || [];
});
this.storeService.getPropertyAsync(this.pageId, this.componentId, 'children')
.pipe(takeUntil(this.destroy)).subscribe(result => {
if (!result || result.length === 0) {
this._children = [];
this._dragData = [];
this.changeRef.markForCheck();
} else {
const dropbuttonArray = result.filter((item) => {
const itemType = this.storeService.getProperty(this.pageId, item, 'componentType');
if (itemType === AdmComponentType.DropdownButton) return item;
});
if (dropbuttonArray.length > 0) {
this._connectableDropLists = [];
dropbuttonArray.forEach(comId => {
this.dragDropService.getDragListsAsync(this.pageId, comId)
.pipe(takeUntil(this.destroy))
.subscribe(dropLists => {
this._connectableDropLists.push(...dropLists);
});
});
}
}
});因为A组件是B组件的父级，所以需要通过当前组件id获取到父级id，再获取到拖拽元素
通过cdkDragData 把拖拽的元素的value，id等值带上
通过(cdkDropListDropped)="drop($event)",注册拖拽结束的回调事件
drop回调事件处理拖拽结束后的数据处理，这里涉及到项目低代码的一些组件数据处理，大致是删除oldParent children, 然后新的parent节点加上，再更改当前组件的parent节点。同时这里涉及到buttongroup下面的button本身也可以互相拖拽的处理，所以也需要一层判断来特殊处理。
drop(event: CdkDragDrop<any>) {
if (event.previousContainer != event.container) {
const { eventData } = event.item.data;
const componentId = eventData[event.previousIndex];
const oldParentId = this.storeService.getProperty(this.pageId, componentId, 'parentId', false)?.value;
// delete oldParent children
const oldParent = this.storeService.getProperties(this.pageId, oldParentId);
const index = oldParent.children.indexOf(componentId);
oldParent.children.splice(index, 1);
// add newParent children
const oldChildren = this.itemDatas.map(x => x.id.value);
oldChildren.splice(event.currentIndex, 0, componentId);
this.storeService.setProperty(this.pageId, componentId, 'parentId', { value: this.componentId }, [[this.pageId, componentId]]);
this.storeService.setProperty(this.pageId, oldParentId, 'children', oldParent.children, [[this.pageId, oldParentId]]);
this.storeService.setProperty(this.pageId, this.componentId, 'children', oldChildren);
this.changeDetector.markForCheck();
return;
}
moveItemInArray(this.itemDatas, event.previousIndex, event.currentIndex);
const children = this.itemDatas.map(x => x.id.value);
this.storeService.setProperty(this.pageId, this.componentId, 'children', children);
}这样子组件和父组件的内部元素互相拖拽，也就能实现了
以上就是Angular如何获取ngIf渲染的Dom元素的简略介绍，当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多，欢迎关注蜗牛博客行业资讯频道哦！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo6@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
版权声明：如无特殊标注，文章均为本站原创，转载时请以链接形式注明文章出处。
评论