Компонент Angular2 не имеет ссылки на класс после перенаправления через маршрутизатор с обратного вызова

Question

Привет, я создал этот plunkr, чтобы продемонстрировать проблему, которая у меня есть. https://plnkr.co/edit/tO4xbD15A3FvjpaGw6J5?p=preview

Это основная часть кода, который выполняет перенаправление после успешного входа в систему. Я не могу обратиться к переменной «isLoggedIn», как это в функции обратного вызова ...

loginLaunch() { 
console.log("authentication.ts:loginLaunch()"); 
let authProperties = AUTH_PROPERTIES; 
authProperties.immediate = false; 
// Sign the user in, and then retrieve their ID. 
let ga = gapi.auth2.getAuthInstance(); 
let router = this.router; 
let redirect2 = this.redirectUrl; 
ga.signIn(authProperties).then(function() { 
    console.log("authentication.ts:loginLaunch() - logged on:"+ ga.currentUser.get().getId()); 
    //this.isLoggedIn=true; 
    // Redirect the user 
    console.log("authentication.ts:loginLaunch() - logged in now, redirect to "+redirect2); 
    router.navigate([redirect2]); 
}); 
} 

Пример работы с файлом «приложение/authentication.ts» и я поставил в двух версиях: "app/authentication.ts.works" и "app/authentication.ts.worksNot"

Первый - это фиктивная аутентификация (на самом деле не запрашивается пароль), а вторая использует проверку подлинности Google ,

Проблема у меня есть это. С помощью аутентификации google (с использованием обещания/обратного вызова) компонент Angular2 после перенаправления не имеет ссылки на класс компонента. В этом случае он должен показывать детали «метки» после входа пользователя в систему. Но это не так. Вы не знаете, что здесь происходит?

Если скопировать содержимое «приложение/authentication.ts.works» в «приложении/authentication.ts», то приложение работает, как ожидалось: информация метки показана на странице COMPONENT1 после входа в

.

Любая помощь приветствуется.

Хельмут

Answer 1

Не используйте function(), потому что это приводит к this, чтобы указать на функцию вместо класса.

Используйте вместо стрелки ФУНКЦИИ () =>, который сохраняет объем this:

ga.signIn(authProperties).then(() => { 

Ваш код имеет несколько видов использования function(). Я предлагаю вам заменить их все, кроме случаев, когда предназначено поведение function() (редкие случаи).

Answer 2

Я выяснил, в чем проблема (обновлен пример plunkr). Вместо вызова router.navigate из «authenticate.ts» напрямую, я должен был вызвать его, используя «zone.run()», чтобы гарантировать, что текущая зона вызвала изменения в несвязанных дочерних компонентах (это моя догадка ...) :

this.zone.run(()=>{ 
     router.navigate([redirect2]) 
    });