Angular升级和jQuery问题

i7uq4tfw  于 12个月前  发布在  jQuery
关注(0)|答案(2)|浏览(100)

作为angular 6到15迁移的一部分,我还必须更新jquery。之前我们使用

"@types/jquery": "2.0.33" 
"jquery": "3.1.1"

作为package.json的一部分,由于我们已经升级到angular,我们有如下的jquery:

"jquery": "^3.6.4",
"@types/jquery": "^3.5.16"

在其中一个地方,我们在.ts文件中使用了下面的查询函数

this.cssService.setElHeight($('.div .content h4'));

以下是服务方法:

setElHeight(element: any) {
        element.height('auto');
        if (element.length) {
            let maxheight: number = 0;
            element.each(() => {
             
              let max_height = $(this).height() ?? 0; //here I get error  Cannot read properties of undefined (reading 'defaultView')
              maxheight = (max_height > maxheight ? max_height : maxheight);
            });
            element.height(maxheight);
        }
    }

在“let max_height = $(this).height() ?? 0;“行,我们得到如下错误:

" Cannot read properties of undefined (reading 'defaultView')"

而不是$(this)我尝试了$(element),但有些内容没有得到适当的高度。

8dtrkrch

8dtrkrch1#

避免使用jQuery或任何其他外部库直接操作DOM。Angular提供了自己的方式,使用ElementRef和Renderer 2与DOM进行交互。
从@angular/core导入ElementRef和Renderer 2:

import { ElementRef, Renderer2 } from '@angular/core';

将ElementRef和Renderer 2注入到服务的构造函数中:

constructor(private renderer: Renderer2) {}

修改setElHeight方法以使用Renderer 2而不是jQuery:

setElHeight(element: ElementRef) {
  const el = element.nativeElement;
  this.renderer.setStyle(el, 'height', 'auto');
  if (el.length) {
    let maxheight: number = 0;
    element.forEach((el: any) => {
      const max_height = el.offsetHeight || 0;
      maxheight = (max_height > maxheight ? max_height : maxheight);
    });
    this.renderer.setStyle(el, 'height', maxheight + 'px');
  }
}

更新模板以将ElementRef传递给setElHeight方法

<div #content class="div content">
  <h4>Some Content</h4>
</div>

希望一切顺利

Using JQuery

setElHeight(element: any) { 
  element.height('auto');   
  if (element.length) { 
    let maxheight: number = 0;  
    element.each(function() {   
      const max_height = $(this).height() || 0; 
      maxheight = (max_height > maxheight ? max_height : maxheight);    
    }); 
    element.height(maxheight);  
  } 
}
rjzwgtxy

rjzwgtxy2#

我已经得到了它的工作方式如下:它可能对有同样需要人有用:

setElHeight(element: any) {
        element.height('auto');
        var $elem = $(element)
        if ($elem.length) {
            let maxheight: number = 0;
            $elem.each(function(key, value)  {
                const max_height = $(this).height() || 0; 
                maxheight = (max_height > maxheight ? max_height : maxheight);
            });
            element.height(maxheight);
        }
    }

相关问题