Question

在我的应用程序中，我遇到了Angular不绑定属性的问题。它也不会调用ngOnInit和ngAfterViewInit或执行指令这是部分LoginComponent代码：

@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");
    }

奇怪的是，这在我打开页面或HMR刷新页面时有效，但在我登录和注销时却没有。
这是注销码：

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"]);
}

我未注销和绑定时的差异是：

按钮未设置样式。这应该kendoButton指令<button class="center" kendoButton type="submit">
缺少测试绑定（某些虚拟测试）
ngOnInit和ngAfterViewInit未被调用。

控制台中没有错误。我也记录屏幕（从空页开始）。我有最新的Chrome和Firefox，两个浏览器都存在同样的问题。

有没有人知道出了什么问题或者我还能尝试什么？

Answer 1

如果gapi在Angulars区域外运行，则不会通知更改检测。您可以在Angulars区域内显式运行代码，如

constructor(private zone:NgZone) {}

...    

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

Answer 2

问题出在Google gapi库中：

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

instance.signOut的回调在Angular的上下文之外运行。解决方案是在google.gapi回调之外进行导航：

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

或者，如果您希望在使用Google的signOut后导航，请使用区域。 This可能有帮助。

当路由改变时，Angular不执行bindings，directive和ngOnInit

2 个答案: