Angular獲取ngIf渲染的Dom元素示例
Angular獲取普通Dom元素的方法
通過模板變量名獲取
import { Component, ViewChild, AfterViewInit } from '@angular/core'; @Component({ ? selector: 'my-app', ? template: ` ? ? <h1>Welcome to Angular World</h1> ? ? <p #greet>Hello {{ name }}</p> ? `, }) export class AppComponent { ? name: string = 'Semlinker'; ? @ViewChild('greet') ? greetDiv: ElementRef; ? ngAfterViewInit() { ? ? console.log(this.greetDiv.nativeElement); ? } }
但我發(fā)現(xiàn)用這種方法獲取ngIf渲染的元素時(shí)得到的是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) ? ? } ? }
通過這個(gè)也是實(shí)現(xiàn)了一個(gè)buttonGroup拖拽button到 列表的功能,列表的button也能拖拽到 buttonGroup
用的也是Angular自帶的 cdk/drag-drop
import { CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
自己實(shí)現(xiàn)的思路
官網(wǎng)的文檔和demo比較簡單,沒有講到跨組件的實(shí)現(xiàn),簡單記錄一下自己實(shí)現(xiàn)的思路。
將需要拖拽的元素加入cdkDropList,并且在A組件和B組件都初始化的時(shí)候獲取到需要拖拽的dom元素,將他們各自注冊到store中,帶上特殊的componentId。
A、B組件加上cdkDropListConnectedTo 這決定著組件可以跨組件拖動(dòng)到哪里,用_connectableDropLists變量。同樣的,在頁面初始化時(shí),通過rxjs的流訂閱特殊的componentId,去獲取到當(dāng)有拖拽list注冊到store中時(shí)的變化,并且賦值給_connectableDropLists數(shù)組。
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); ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? }); ? ? ? ? ? } ? ? ? ? } ? ? ? });
因?yàn)锳組件是B組件的父級(jí),所以需要通過當(dāng)前組件id獲取到父級(jí)id,再獲取到拖拽元素
通過cdkDragData 把拖拽的元素的value,id等值帶上
通過(cdkDropListDropped)="drop($event)",注冊拖拽結(jié)束的回調(diào)事件
drop回調(diào)事件處理拖拽結(jié)束后的數(shù)據(jù)處理,這里涉及到項(xiàng)目低代碼的一些組件數(shù)據(jù)處理,大致是刪除oldParent children, 然后新的parent節(jié)點(diǎn)加上,再更改當(dāng)前組件的parent節(jié)點(diǎn)。同時(shí)這里涉及到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); ? }
這樣子組件和父組件的內(nèi)部元素互相拖拽,也就能實(shí)現(xiàn)了
以上就是Angular獲取ngIf渲染的Dom元素示例的詳細(xì)內(nèi)容,更多關(guān)于Angular獲取ngIf渲染的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes]
這篇文章主要介紹了AngularJS 使用ng-repeat報(bào)錯(cuò) [ngRepeat:dupes] 的相關(guān)資料,需要的朋友可以參考下2017-01-01深入學(xué)習(xí)AngularJS中數(shù)據(jù)的雙向綁定機(jī)制
這篇文章主要介紹了AngularJS中數(shù)據(jù)的雙向綁定機(jī)制,雙向綁定使得HTML中呈現(xiàn)的view與AngularJS中的數(shù)據(jù)一致,是Angular的重要特性之一,需要的朋友可以參考下2016-03-03AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法詳解
這篇文章主要介紹了AngularJS使用ng-repeat遍歷二維數(shù)組元素的方法,結(jié)合實(shí)例形式分析了AngularJS二維數(shù)組元素遍歷的相關(guān)操作技巧,需要的朋友可以參考下2017-11-11詳解angular2.x創(chuàng)建項(xiàng)目入門指令
這篇文章主要介紹了詳解angular2.x創(chuàng)建項(xiàng)目入門指令,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10angular動(dòng)態(tài)刪除ng-repaeat添加的dom節(jié)點(diǎn)的方法
本篇文章主要介紹了angular動(dòng)態(tài)刪除ng-repaeat添加的dom節(jié)點(diǎn)的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-07-07angular 實(shí)時(shí)監(jiān)聽input框value值的變化觸發(fā)函數(shù)方法
今天小編就為大家分享一篇angular 實(shí)時(shí)監(jiān)聽input框value值的變化觸發(fā)函數(shù)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08angularJS實(shí)現(xiàn)不同視圖同步刷新詳解
今天小編就為大家分享一篇angularJS實(shí)現(xiàn)不同視圖同步刷新詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法
今天小編就為大家分享一篇angular 未登錄狀態(tài)攔截路由跳轉(zhuǎn)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10angular.js+node.js實(shí)現(xiàn)下載圖片處理詳解
這篇文章主要介紹了angular.js+node.js實(shí)現(xiàn)下載圖片處理的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-03-03AngularJS輕松實(shí)現(xiàn)雙擊排序的功能
網(wǎng)上已經(jīng)有AngularJS比較多的相關(guān)教程了,那么這篇文章我們一起來看一個(gè)AngularJS雙擊排序的例子,對(duì)大家日常開發(fā)很有幫助的,有需要的可以參考借鑒。2016-08-08