Angular2 查询参数订阅触发两次

尝试处理 OAuth 登录场景，其中如果用户登陆页面authorization_code在查询字符串中，我们处理令牌并继续or如果他们在没有该令牌的情况下登陆页面，我们会检查本地存储中是否存在现有令牌，确保其仍然有效，并根据其有效性重定向到登录或继续。

问题是我们在哪里检查是否存在authorization_code查询字符串参数，订阅触发两次。第一次它是空的，第二次它在字典中具有正确的值。

应用程序组件.ts

export class App implements OnInit {
    constructor(private _router: ActivatedRoute) {
    }

    public ngOnInit(): void {
        console.log('INIT');
        this._route.queryParams.subscribe(params => {
            console.log(params);
        });
    }
}

This code outputs:

Plunker https://plnkr.co/edit/XgCauzZdTSqqokCdFWCi?p=preview（您需要将其弹出到新窗口中并添加查询字符串?test=test).

问题

1. 难道是我做错了什么才让它着火两次？
2. 我不能只是忽略带有条件的空对象，因为这是我们需要验证现有身份验证令牌的场景 - 是否有另一种方法来解决这个问题，而不是一个完整的黑客？

路由器可观察量（正如另一个答案提到的）are BehaviorSubject科目 https://github.com/angular/angular/blob/2.0.1/modules/%40angular/router/src/router_state.ts#L65-L70，它们与常规 RxJS 不同Subject或角度 2EventEmitter因为它们将初始值推送到序列中（在以下情况下为空对象）queryParams).

一般来说，使用初始化逻辑进行订阅的可能性是可取的。

可以跳过初始值skip操作员。

this._route.queryParams
.skip(1)
.subscribe(params => ...);

但处理这个问题的更自然的方法是过滤掉所有不相关的参数（初始参数）params属于这一类）。复制authorization_code值也可以过滤distinctUntilChanged操作员以避免对后端不必要的调用。

this._route.queryParams
.filter(params => 'authorization_code' in params)
.map(params => params.authorization_code)
.distinctUntilChanged()
.subscribe(authCode => ...);

请注意，Angular 2 导入了有限数量的 RxJS 运算符（至少map如果是@angular/router）。如果满了rxjs/Rx未使用捆绑包，可能需要导入额外的运算符（filter, distinctUntilChanged）正在使用import 'rxjs/add/operator/<operator_name>'.