Angular führt Bindings, Direktive und ngOnInit nicht aus, wenn Route geändert wird

Question

In meiner Anwendung habe ich Probleme mit angular nicht bindende Eigenschaften. Es ruft auch ngOnInit und ngAfterViewInit nicht auf oder führt Anweisungen aus.
ist hier teilweise LoginComponent Code:

@Component({ 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.scss'] 
}) 
export class LoginComponent implements OnInit 

//..... 

    public test: string = 'some dummy test'; 

    constructor(
     private cd: ChangeDetectorRef, 
     private fb: FormBuilder, private router: Router, private route: ActivatedRoute, 
     private authService: AuthService, 
     private usersService: UserService, 
     private notificationsService: NotificationsService 
    ) 
    { 
     this.loginForm = fb.group({ 
      email: ["", Validators.required], 
      password: ["", Validators.required] 
     }); 
     console.info("constructor"); 
    } 

    ngOnInit() 
    { 
     console.info("ngOnInit"); 
     this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';   
    } 

    ngAfterViewInit() 
    { 
     this.initGapi(); 
     console.info("afterviewinit"); 
    } 

Seltsam ist, dass dies funktioniert, wenn ich Seite zu öffnen, oder HMR Seite aktualisieren, aber nicht, wenn ich Anmelde- und Abmelde.
ist die Logout-Code:

logout(): boolean 
{ 
    this.authService.logout(); 
} 

//authservice.ts 
logout() 
{  
    localStorage.removeItem("token"); 
    localStorage.removeItem("refresh_token"); 
    localStorage.removeItem("profile"); 

    if (gapi.auth2) 
    { 
     const instance = gapi.auth2.getAuthInstance(); 
     if (instance) 
     { 
      instance.signOut().then(() => 
      { 
       this.router.navigate(["login"]); 
      }); 
      return; 
     } 
    } 
    this.router.navigate(["login"]); 
} 

Die Unterschiede, wenn ich abmelden und Bindung sind nicht auftreten:

• Knopf nicht gestylt. Dies sollte fehlt

Bindung kendoButton Richtlinie <button class="center" kendoButton type="submit">

• zu Test (einige Dummy-Test) tun

• ngOnInit und ngAfterViewInit wird nicht aufgerufen.

Es gibt keinen Fehler in der Konsole. Ich nehme auch Bildschirm auf (es beginnt mit einer leeren Seite). Ich habe die neuesten Chrome und Firefox, und das gleiche Problem ist in beiden Browsern.

Hat jemand eine Idee was falsch ist oder was kann ich sonst noch versuchen?

Answer 1

Wenn gapi außerhalb der Angulars-Zone ausgeführt wird, wird die Änderungserkennung nicht zur Ausführung weitergeleitet. Sie können Code innerhalb Angulars Zone wie

constructor(private zone:NgZone) {} 

...  

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

Answer 2

Problem ist in Google gapi Bibliothek:

const instance = gapi.auth2.getAuthInstance(); 
if (instance) 
{ 
    instance.signOut().then(() => 
    { 
     this.router.navigate(["login"]); //This is runned outside Angular's context. 
    }); 
    return; 
} 

Rückruf von instance.signOut läuft außerhalb Angular Kontext. Lösung außerhalb google.gapi Rückruf zu platzieren navigieren:

const instance = gapi.auth2.getAuthInstance(); 
if (instance) 
{ 
    instance.signOut(); 
    this.router.navigate(["login"]); 
} 

Oder wenn Sie nach SignOut von Google navigieren möchten, verwenden Sie Zonen. This kann helfen.