Question

我的angular 6代码中有一个变量，我希望在准备好文档时设置此变量。如何在JQuery中使用angular var？

export class AppComponent implements OnInit {
    public myVar : string = "blue";


  public ngOnInit()
  {
     $(document).ready(function(){
              var ev = $('DivClassName');
              var txt = ev.html();
              if (txt == this.myVar)
              {
                ev.css("background-color", this.myVar); 
                this.myVar = txt;
              }
     });
  } // ngOnInit
}

在这种情况下，我在编辑器中收到此错误： Property 'myVar' does not exist on type 'HTMLElement'.ts(2339)

编辑：实际上，我想为每个事件更改背景颜色取决于我的应用https://stackblitz.com/edit/angular-q14jh3中的事件类型

Answer 1

#or if you prefer WGS84 projection
#project map to WGS84
map.wgs84 <- OpenStreetMap::openproj( map, projection = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs" )
ggplot2::autoplot( map.wgs84 ) + geom_point( data = df2.plot, aes( x = Longitude, y = Latitude, colour = Survey_Type ),
                                             alpha = 0.25, size = 5 )

对于ngOnInit document.ready不会执行，因此应该在ngAfterViewInit中

Use callback with Arrow Functions for document ready method.
    export class AppComponent implements OnInit {
        public myVar : string = "blue";


      public ngOnInit()
      {
         $(document).ready(() => {
                  var ev = $('DivClassName');
                  var txt = ev.html();
                  if (txt == this.myVar)
                  {
                    ev.css("background-color", this.myVar); 
                    this.myVar = txt;
                  }
         });
      } // ngOnInit
    }

Answer 2

您需要将正确的上下文（即this绑定到您的$(document).ready(function()...函数：

$(document).ready(function(){
              var ev = $('DivClassName');
              var txt = ev.html();
              if (txt == this.myVar)
              {
                ev.css("background-color", this.myVar); 
                this.myVar = txt;
              }
     }.bind(this));

Answer 3

您的代码中至少有一个错误。准备好要准备的文档，当页面加载时将被触发，但是在Angular ngOnInit方法中，该文档已经 ready ，并且不会触发。

接下来的事情是，您不需要jQuery来使用，只需使用Angular内置的属性绑定即可。

我会以这种方式开发

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

@Component({
  selector: 'app-bg',
  template: 'blue'
})
export class BgComponent {
  background = 'blue';

  constructor(private elementRef: ElementRef) {}

  @HostBinding('style.background-color') 
  get backgroundColor() {
    return this.elementRef.nativeElement.innerHTML === this.background
      ? this.background
      : null
  }
}

也可以看看NgStyle。

请参阅此Stackblitz。

您实际上可以在jQuery中使用角度变量，您的代码存在的问题是function() {}会覆盖您的闭包。意味着，函数内部的this不再引用组件类。您可以使用lambda函数() => {}来防止这种情况。在您的代码中，您只需删除document ready检查，因为ngOnInit检查您的组件是否已经初始化。

Answer 4

尝试一下

//To use jquery
declare var $: any;

export class AppComponent implements OnInit {

    public myVar : string = "blue";

    public ngOnInit() {

        var ev = $('DivClassName').css("background-color");            

        if (ev == this.myVar){
           ev.css("background-color", this.myVar); 
           this.myVar = ev;
        }
    }
}

Answer 5

您有一个错误。

首先，当OnInit函数被调用时- 文档准备就绪。

此外，您应该避免同时使用jQuery和angular。

请参见Here。

如何在JQuery中访问angular 6变量

5 个答案: