Angular通过DOM操作设置Material弹窗样式的替代方法

发布网友发布时间：2024-09-17 03:37

共1个回答

热心网友时间：2024-10-12 22:20

场景：表格页面，点击按钮后弹窗，对该行订单的规格进行修改，因为是仓库人员使用，所以需要调大输入框的字体方便使用。因为无法直接修改弹窗的样式SCSS（动态弹窗，有多个组件调用），所以打算采用获取DOM并设置font-size的方式。Ps：由于中间修改的代码没有保存，问题已经解决，所以多次尝试后删除掉的代码用省略号代替

首次尝试

我先打开弹窗，找到我需要的输入框的class，然后在ts文件中获取对应的DOM：

constructor(privateel:ElementRef,){}ngOnInit():void{this.el.nativeElement.querySelector('.mat-form-field-infix').style.fontSize='18px';}

失败了，打印出来显示获取的是null尝试多次不同的class名以及id名之后，放弃了该方法。

第二次尝试

由于弹窗是后加载，那我将获取DOM的操作放在弹窗绑定的按钮中，并设定延时是否可取呢？

asyncEditSpecs():Promise<void>{setTimeout(()=>{this.el.nativeElement.querySelector('.mat-form-field-infix').style.fontSize='18px';},1000);}

打印出来发现并没有什么改变，即使弹窗已经完整的展示在我面前，我依旧无法获取到他的DOM

第三次尝试

和一个不使用angular开发的前端同事交流了一下，一致认为由于弹窗属于后加载的组件，所以提前获取不可取，便打算采用监听的方式：

@ViewChild('DialogContent')dialogDiv:ElementRef;dialogDiv.nativeElement.style.fontSize='18px';

这次和之前不一样了，获取的是undefined……

第四次尝试

听了另一个同事的建议，Angular会不会在弹窗加载后，弹窗会读取一次SCSS文件呢？如果可行直接在网页里根据弹窗的class进行样式设置即可。

@Component({……encapsulation:ViewEncapsulation.None,})@import"src/@fuse/scss/fuse";supplier-order-warehouse{……{font-size:18px!important;}}

并没有生效，要么是弹窗本身的CSS覆盖了我设置的CSS，要么是根本没有读取

最终解决方案

我最终放弃了获取DOM的方案，转用传参的方式，新增一个style用来设置内联样式：

constdialogRef=this._matDialog.open(DialogFormComponent,{panelClass:'dialog-form',width:'300px',data:{action:'edit',……style:'font-size:18px'}});

在弹窗组件的ts文件中声明

styleConfig:string;/***@param{MatDialogRef<DialogFormComponent>}matDialogRef*@param_data//接收的数据*@param{FormBuilder}_formBuilder*@paramgeneral*@paramconfSvc*/constructor(publicmatDialogRef:MatDialogRef<DialogFormComponent>,//回传数据给弹框@Inject(MAT_DIALOG_DATA)private_data:any,//接收弹框数据private_formBuilder:FormBuilder,publicgeneral:GeneralService,publicconfSvc:ConfigService,){const{action,……,style}=_data;this.action=action;……this.styleConfig=style;}

html文件中设置：

<mat-form-fieldappearance="outline"fxFlex*ngIf="form.type!=='imgFile';elseuploadFile"……[style]="styleConfig"><mat-label>{{form.label}}</mat-label><input*ngSwitchDefault[type]="form.type?form.type:''"……>……</mat-form-field>

总算达成了想要的效果，其实途中就想过这个方式，但觉得有点笨属于下下之策，操作DOM*格多高啊（不是），折腾了半个下午最终还是采用了这个方法。

原文：https://juejin.cn/post/7099366581951528991