Как сохранить переменную this в функции (typcript / jquery)

Question

Я использую Jquery в моем angular проекте. Я пытаюсь получить доступ к значению this.selectedUrl , но когда он переходит в функцию Jquery ready, он выдает UNDEFINED.How, чтобы сделать это. ?

this.selectedUrl = this.router.url
   console.log("this.selectedUrl",this.selectedUrl)  // gives value i.e /home
   $(document).ready(function () {
     console.log("this.selectedUrl",this.selectedUrl)  // gives undefiend
     if(this.selectedUrl=="/home"){
      console.log("this.selectedUrlIf",this.selectedUrl)
     }

  });

Answer 1

Сначала angular не нужно jquery для обработки каких-либо функций. Тем не менее, в этом случае вы получаете неопределенное значение из-за использования function ключевого слова с $(document). Внутри $(document).ready(function () this появится совершенно новая область, и он не знает, что такое selectedUrl. Вы можете исследовать arrow function

Answer 2

this принимает совершенно другое значение внутри ready функции, если вы не связываете this с функцией

Например:

this.selectedUrl = this.router.url
   console.log("this.selectedUrl",this.selectedUrl)  // gives value i.e /home
   $(document).ready(function () {
     console.log("this.selectedUrl",this.selectedUrl)  // this is now available
     if(this.selectedUrl=="/home"){
      console.log("this.selectedUrlIf",this.selectedUrl)
     }

  }.bind(this));

или используйте функции стрелок ES6 , которые берут this из родительской области

this.selectedUrl = this.router.url
   console.log("this.selectedUrl",this.selectedUrl)  // gives value i.e /home
   $(document).ready(()=>{
     console.log("this.selectedUrl",this.selectedUrl)  // this is now available
     if(this.selectedUrl=="/home"){
      console.log("this.selectedUrlIf",this.selectedUrl)
     }

  });

, третий вариант - сохранить this в другой переменной и вместо этого обратиться к этой переменной. Например:

var that = this; // store to variable
this.selectedUrl = this.router.url
   console.log("this.selectedUrl",this.selectedUrl)  // gives value i.e /home
   $(document).ready(function () {
     console.log("this.selectedUrl",that.selectedUrl)  // this is now available via that variable
     if(that.selectedUrl=="/home"){
      console.log("this.selectedUrlIf",that.selectedUrl)
     }

  });

Объяснение: this - уникальная переменная от остальных (в объектно-ориентированном программировании). Он получает , переназначенный другим значениям (с тем же именем this), в зависимости от того, какая область действия используется . Таким образом, чтобы this ссылался на конкретный экземпляр c внутри другой функции, вам необходимо следовать одному из подходов, приведенных выше.