如何在angular中实现这个jquery函数？_Jquery_Angular

如何在angular中实现这个jquery函数？

jquery angular

如何在angular中实现这个jquery函数？,jquery,angular,Jquery,Angular,我想使用我发现的函数来实现组件中的功能我尝试将其添加到index.html中。这是我的index.html： <! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Test </title> <base href = "/"> <me

我想使用我发现的函数来实现组件中的功能

我尝试将其添加到index.html中。这是我的index.html：

<! doctype html>
<html lang = "en">
<head>
  <meta charset = "utf-8">
  <title> Test </title>
  <base href = "/">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1">
  <link rel = "icon" type = "image / x-icon" href = "favicon.ico">
  <link href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel = "stylesheet">
  <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity = "sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt + Y8vinAf7" anonymousorfUU "
  <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
  <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script>
    $ .fn.fitInText = function () {
      this.each (function () {

        let textbox = $ (this);
        let textboxNode = this;

        let mutationCallback = function (mutationsList, observer) {
          if (observer) {
            observer.disconnect ();
          }
          textbox.css ('font-size', 0);
          let desiredHeight = textbox.css ('height');
          for (i = 12; i <50; i ++) {
            textbox.css ('font-size', i);
            if (textbox.css ('height')> desiredHeight) {
              textbox.css ('font-size', i - 1);
              break;
            }
          }

          var config = {
            attributes: true,
            childList: true,
            subtree: true,
            characterData: true
          };
          let newobserver = new MutationObserver (mutationCallback);
          newobserver.observe (textboxNode, config);

        };

        mutationCallback ();

      });
    }
  </script>
</head>
<body class = "mat-typography">
  <app-root> </app-root>
</body>
</html>

组件模板：

  <div class = "text" contenteditable = true>
    TEST
  </div>


试验

这就是它向我显示的错误：

我有，如果你看到它与我在本地和stackblitz中的代码完全相同，你可以使用它来实现这一点

下面是示例，计算可以根据您的喜好进行调整，否则它将实现此功能

fit-in-text.directive.ts

导入{
AfterViewInit，
指令，
ElementRef，
主持人：，
输入
}从“@角度/核心”；
@指示({
选择器：“[appFitInText]”
})
导出类FitInTextDirective在ViewInit之后实现{
maxTextFont=50；
minTextFont=12；
@输入（“appFitInText”）选项={
高度：“250px”，
宽度：“100%”
};
ngAfterViewInit（）{
this.el.nativeElement.style.height=this.option.height；
this.el.nativeElement.style.width=this.option.width；
this.el.nativeElement.style.fontSize=this.maxTextFont+“px”；
}
构造函数（私有el:ElementRef）{}
@主机侦听器（“键控”）
fitinext（）{
常数换行符=
（this.el.nativeElement.value.match（/\n/g）| |“”）.length+1；
const textFont=Math.max（this.minTextFont，this.maxTextFont*2/换行符）；
this.el.nativeElement.style.fontSize=Math.min（this.maxTextFont，textFont）+“px”；
console.log（Math.min（this.maxTextFont，textFont）+“px”）
}
}

component.html

我认为您需要重新考虑在

Angular

中使用

JQuery，但老实说，我没有太多时间，我也不太了解将其转换为typescript的功能，不幸的是，因为我还是一个新手。@OwenKelvin知道如何在angular中实现该功能吗？感谢时间，但本质上我试图做的是文本减小其大小（而不是激活滚动）如果用户删除了文本的一部分，那么所述文本将恢复到其原始大小，如我放置的stackblitz中的示例所示。
  <div class = "text" contenteditable = true>
    TEST
  </div>