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

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

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

瀏覽:203日期: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
主站蜘蛛池模板: 电机修理_二手电机专家-河北豫通机电设备有限公司(原石家庄冀华高压电机维修中心) | 隆众资讯-首页_大宗商品资讯_价格走势_市场行情 | 齿轮减速机电机一体机_齿轮减速箱加电机一体化-德国BOSERL蜗轮蜗杆减速机电机生产厂家 | 爱佩恒温恒湿测试箱|高低温实验箱|高低温冲击试验箱|冷热冲击试验箱-您身边的模拟环境试验设备技术专家-合作热线:400-6727-800-广东爱佩试验设备有限公司 | 影视模板素材_原创专业影视实拍视频素材-8k像素素材网 | 超声波清洗机_超声波清洗机设备_超声波清洗机厂家_鼎泰恒胜 | 长城人品牌官网| PAS糖原染色-CBA流式多因子-明胶酶谱MMP-上海研谨生物科技有限公司 | 车牌识别道闸_停车场收费系统_人脸识别考勤机_速通门闸机_充电桩厂家_中全清茂官网 | 恒温恒湿试验箱厂家-高低温试验箱维修价格_东莞环仪仪器_东莞环仪仪器 | 聚丙烯酰胺_阴离子_阳离子「用量少」巩义亿腾厂家直销,售后无忧 聚合甘油__盐城市飞龙油脂有限公司 | 北京模型公司-工业模型-地产模型-施工模型-北京渝峰时代沙盘模型制作公司 | 便携式表面粗糙度仪-彩屏硬度计-分体式粗糙度仪-北京凯达科仪科技有限公司 | 优秀的临床医学知识库,临床知识库,医疗知识库,满足电子病历四级要求,免费试用 | 环氧乙烷灭菌器_压力蒸汽灭菌器_低温等离子过氧化氢灭菌器 _低温蒸汽甲醛灭菌器_清洗工作站_医用干燥柜_灭菌耗材-环氧乙烷灭菌器_脉动真空压力蒸汽灭菌器_低温等离子灭菌设备_河南省三强医疗器械有限责任公司 | 北京翻译公司-专业合同翻译-医学标书翻译收费标准-慕迪灵 | 技德应用| 南京精锋制刀有限公司-纵剪机刀片_滚剪机刀片_合金刀片厂家 | 齿轮减速机_齿轮减速电机-VEMT蜗轮蜗杆减速机马达生产厂家瓦玛特传动瑞环机电 | 伟秀电气有限公司-10kv高低压开关柜-高低压配电柜-中置柜-充气柜-欧式箱变-高压真空断路器厂家 | 美国查特CHART MVE液氮罐_查特杜瓦瓶_制造全球品质液氮罐 | 云南成考网_云南成人高考报名网 粤丰硕水性环氧地坪漆-防静电自流平厂家-环保地坪涂料代理 | 大立教育官网-一级建造师培训-二级建造师培训-造价工程师-安全工程师-监理工程师考试培训 | 钢格板|镀锌钢格板|热镀锌钢格板|格栅板|钢格板|钢格栅板|热浸锌钢格板|平台钢格板|镀锌钢格栅板|热镀锌钢格栅板|平台钢格栅板|不锈钢钢格栅板 - 专业钢格板厂家 | 中国在职研究生招生信息网| 洛阳装修公司-洛阳整装一站式品牌-福尚云宅装饰 | 乐考网-银行从业_基金从业资格考试_初级/中级会计报名时间_中级经济师 | 称重传感器,测力传感器,拉压力传感器,压力变送器,扭矩传感器,南京凯基特电气有限公司 | 重庆LED显示屏_显示屏安装公司_重庆LED显示屏批发-彩光科技公司 重庆钣金加工厂家首页-专业定做监控电视墙_操作台 | 北京银联移动POS机办理_收银POS机_智能pos机_刷卡机_收银系统_个人POS机-谷骐科技【官网】 | 沙盘模型公司_沙盘模型制作公司_建筑模型公司_工业机械模型制作厂家 | 汝成内控-行政事业单位内部控制管理服务商 | 商标转让-购买商标专业|放心的商标交易网-蜀易标商标网 | 私人别墅家庭影院系统_家庭影院音响_家庭影院装修设计公司-邦牛影音 | 冰雕-冰雪世界-大型冰雕展制作公司-赛北冰雕官网 | 好物生环保网、环保论坛 - 环保人的学习交流平台 | 防水套管|柔性防水套管|伸缩器|伸缩接头|传力接头-河南伟创管道 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 湖南自考_湖南自学考试网 | 办公室家具公司_办公家具品牌厂家_森拉堡办公家具【官网】 | 高通量组织研磨仪-多样品组织研磨仪-全自动组织研磨仪-研磨者科技(广州)有限公司 | 生产加气砖设备厂家很多,杜甫机械加气砖设备价格公道 |