Angular獲取ngIf渲染的Dom元素示例

更新時(shí)間：2023年05月12日 14:03:52 作者：后青春期的詩(shī)

這篇文章主要為大家介紹了Angular獲取ngIf渲染的Dom元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Angular獲取普通Dom元素的方法

通過(guò)模板變量名獲取

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)
? ? }
? }

通過(guò)這個(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比較簡(jiǎn)單，沒(méi)有講到跨組件的實(shí)現(xiàn)，簡(jiǎn)單記錄一下自己實(shí)現(xiàn)的思路。

將需要拖拽的元素加入cdkDropList，并且在A組件和B組件都初始化的時(shí)候獲取到需要拖拽的dom元素，將他們各自注冊(cè)到store中，帶上特殊的componentId。

A、B組件加上cdkDropListConnectedTo 這決定著組件可以跨組件拖動(dòng)到哪里，用_connectableDropLists變量。同樣的，在頁(yè)面初始化時(shí)，通過(guò)rxjs的流訂閱特殊的componentId,去獲取到當(dāng)有拖拽list注冊(cè)到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í)，所以需要通過(guò)當(dāng)前組件id獲取到父級(jí)id，再獲取到拖拽元素

通過(guò)cdkDragData 把拖拽的元素的value，id等值帶上

通過(guò)(cdkDropListDropped)="drop($event)",注冊(cè)拖拽結(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本身也可以互相拖拽的處理，所以也需要一層判斷來(lái)特殊處理。

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)文章！

您可能感興趣的文章: