角度2：queryParams onInit答案

【问题标题】：angular 2: queryParams onInit角度2：queryParams onInit
【发布时间】：2017-09-22 15:22:17
【问题描述】：

我目前在使用 ActivatedRoute 的 queryParams 时遇到了一些问题。我正在尝试实现一个系统，您可以在其中使用 queryParams = "?token=1234" 调用任何 url。如果提供了此参数，AppComponent 将使用此令牌来验证用户。

这样做的原因是用户将在不同的应用程序中进行身份验证，该应用程序将接收令牌并将其转发给 Angular 应用程序。

所以，在我的 AppComponent 中，我有以下代码：

ngOnInit() {

    this._route.queryParams.subscribe(queryParams => {
        if (queryParams['token'] != null) {
            let data;
            this._staffService.getStaffFromToken(queryParams['token']).subscribe(
                (response: any) => data = response,
                (error: Error) => console.error(error),
                () => {
                    if (data.token != null) {
                        this._staffService.setLoggedInStaff(data.staff);
                        this.processLogin();
                    } else {
                        this._router.navigateByUrl('/login');
                    }
                }
            );
        } else {
            if (this._staffService.getLoggedInStaff() != null) {
                this.processLogin();
            } else {
                this._router.navigateByUrl('/login');
            }
        }
    });
}

我完全理解能够订阅这些参数的想法，因为它是一个 SPA，并且在使用应用程序时参数可能会发生变化。

但是，当我转到以下网址时：http://localhost:4200?token=1234 它会立即导航到 /login。出于某种原因，当调用 ngOnInit 时，它不会立即检测到 queryParam。当我向 queryParams 添加 500 的 debounceTime 时，它确实可以正常工作，但在我看来不是一个好的解决方案。

有人有什么建议吗？我尝试了不同的方法，但我一直遇到这个问题。

【问题讨论】：

标签： angular

【解决方案1】：

尝试将您的代码放在ngOnChanges() 并查看ng2 Lifecycle

【讨论】：

【解决方案2】：

当使用 observable 时，你不能编写同步代码。

试试这个。

constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
   const token = this.activatedRoute.snapshot.params['token'];
   Your code ...
}

【讨论】：