电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

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

瀏覽:202日期:2022-06-10 08:36:00
目錄
  • Angular獲取普通Dom元素的方法
    • 通過模板變量名獲取
    • 將static改成false 獲取
  • 自己實現的思路
    • 通過cdkDragData 把拖拽的元素的value,id等值帶上

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

但我發現用這種方法獲取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元素示例的詳細內容,更多關于Angular獲取ngIf渲染的資料請關注其它相關文章!

標簽: JavaScript
主站蜘蛛池模板: 上海单片机培训|重庆曙海培训分支机构—CortexM3+uC/OS培训班,北京linux培训,Windows驱动开发培训|上海IC版图设计,西安linux培训,北京汽车电子EMC培训,ARM培训,MTK培训,Android培训 | 红酒招商加盟-葡萄酒加盟-进口红酒代理-青岛枞木酒业有限公司 | 拉曼光谱仪_便携式|激光|显微共焦拉曼光谱仪-北京卓立汉光仪器有限公司 | 自动化生产线-自动化装配线-直流电机自动化生产线-东莞市慧百自动化有限公司 | 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 百度网站优化,关键词排名,SEO优化-搜索引擎营销推广 | LOGO设计_品牌设计_VI设计 - 特创易 | 污水处理设备-海普欧环保集团有限公司 | 平面钻,法兰钻,三维钻-山东兴田阳光智能装备股份有限公司 | 甲级防雷检测仪-乙级防雷检测仪厂家-上海胜绪电气有限公司 | Maneurop/美优乐压缩机,活塞压缩机,型号规格,技术参数,尺寸图片,价格经销商 | 轻型地埋电缆故障测试仪,频响法绕组变形测试仪,静荷式卧式拉力试验机-扬州苏电 | 线粒体膜电位荧光探针-细胞膜-标记二抗-上海复申生物科技有限公司 | ZHZ8耐压测试仪-上海胜绪电气有限公司 | 吸污车_吸粪车_抽粪车_电动三轮吸粪车_真空吸污车_高压清洗吸污车-远大汽车制造有限公司 | 电动葫芦|手拉葫芦|环链电动葫芦|微型电动葫芦-北京市凌鹰起重机械有限公司 | 喷漆房_废气处理设备-湖北天地鑫环保设备有限公司 | 磁力去毛刺机_去毛刺磁力抛光机_磁力光饰机_磁力滚抛机_精密金属零件去毛刺机厂家-冠古科技 | 广东西屋电气有限公司-广东西屋电气有限公司 | 陕西视频监控,智能安防监控,安防系统-西安鑫安5A安防工程公司 | LOGO设计_品牌设计_VI设计 - 特创易| 电脑刺绣_绣花厂家_绣花章仔_织唛厂家-[源欣刺绣]潮牌刺绣打版定制绣花加工厂家 | 蔬菜清洗机_环速洗菜机_异物去除清洗机_蔬菜清洗机_商用洗菜机 - 环速科技有限公司 | 临沂招聘网_人才市场_招聘信息_求职招聘找工作请认准【马头商标】 | 超声波清洗机_细胞破碎仪_实验室超声仪器_恒温水浴-广东洁盟深那仪器 | 河南档案架,档案密集架,手动密集架,河南密集架批发/报价 | 水压力传感器_数字压力传感器|佛山一众传感仪器有限公司|首页 | 校园文化空间设计-数字化|中医文化空间设计-党建|法治廉政主题文化空间施工-山东锐尚文化传播公司 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | 杰福伦_磁致伸缩位移传感器_线性位移传感器-意大利GEFRAN杰福伦-河南赉威液压科技有限公司 | 衬四氟_衬氟储罐_四氟储罐-无锡市氟瑞特防腐科技有限公司 | 昆明网络公司|云南网络公司|昆明网站建设公司|昆明网页设计|云南网站制作|新媒体运营公司|APP开发|小程序研发|尽在昆明奥远科技有限公司 | 镀锌方管,无缝方管,伸缩套管,方矩管_山东重鑫致胜金属制品有限公司 | 广州云仓代发-昊哥云仓专业电商仓储托管外包代发货服务 | 送料机_高速冲床送料机_NC伺服滚轮送料机厂家-东莞市久谐自动化设备有限公司 | 全温度恒温培养摇床-大容量-立式-远红外二氧化碳培养箱|南荣百科 | 高光谱相机-近红外高光谱相机厂家-高光谱成像仪-SINESPEC 赛斯拜克 | 钢衬四氟管道_钢衬四氟直管_聚四氟乙烯衬里管件_聚四氟乙烯衬里管道-沧州汇霖管道科技有限公司 | 质构仪_鱼糜弹性仪-上海腾拔仪器科技有限公司 | 股指期货-期货开户-交易手续费佣金加1分-保证金低-期货公司排名靠前-万利信息开户 | 首页-恒温恒湿试验箱_恒温恒湿箱_高低温试验箱_高低温交变湿热试验箱_苏州正合 |