«Это» не определено внутри подписки

Question

У меня есть оператор подписки, и я пытаюсь его отладить, однако, когда я прохожу через VS Code, 'this' всегда внутри оператора не определено.В этой ситуации this.dataLoaded не определено.как я могу сделать так, чтобы он не был неопределенным при отладке?

this.router.events
            .filter(event => (event instanceof NavigationEnd))
                .subscribe((routeData: any) => {                        
                    if(!this.dataLoaded){
                      ...
                    }
                });  

Answer 1

Когда вы используете .subscribe(), то в угловом выражении возможно, что он не получит this.В моем случае я использовал другую копию этого.Это всегда работает для меня.Это может и для вас.

var that = this; // Hear I store the this ref into another that
this.router.events
        .filter(event => (event instanceof NavigationEnd))
            .subscribe((routeData: any) => {                        
                if(!that.dataLoaded){  // Hear you can use that instead of this
                  ...
                }
            }); 

Answer 2

Пожалуйста, ознакомьтесь с closure раскрыть разделы во вкладке отладчика variables.Ваше настоящее this будет на один уровень выше самого верхнего, где this относится к имени контроллера компонента.Каждая анонимная функция создает дополнительное закрытие, в вашем случае оно заключено в subscribe, и это закрытие будет по умолчанию открыто VS Code при достижении вашей точки останова.

И, пожалуйста, старайтесь избегать этого старого стиляJS взлом let that = this и т. Д., Поскольку при использовании функций TypeScript, Classes, ES6 и стрелок эти хаки больше не нужны.