无法从 App.Component 读取查询字符串参数答案

【问题标题】：Unable to read querystring parameters from App.Component无法从 App.Component 读取查询字符串参数
【发布时间】：2019-01-22 20:51:27
【问题描述】：

我想集中在整个应用程序中读取特定查询字符串参数的位置/方式，因此我认为执行此操作的最佳位置是在 app.component.ts 中

export class AppComponent implements OnInit, OnDestroy {
  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute) {
  }

然后，在ngOnInit()，我正在查看快照以及不同的订阅：

  ngOnInit(): void {
    console.log('AppComponent - ngOnInit() -- Snapshot Params: ' + this.activatedRoute.snapshot.params['code']);
    console.log('AppComponent - ngOnInit() -- Snapshot Query Params: ' + this.activatedRoute.snapshot.queryParams['code']);
    console.log('AppComponent - ngOnInit() -- Snapshot Query ParamMap: ' + this.activatedRoute.snapshot.queryParamMap.get('code'));

    this.activatedRouteParamsSubscription = this.activatedRoute.params.subscribe(params => {
      console.log('AppComponent - ngOnInit() -- Subscription Params: ' + params['code']);
    });

    this.activatedRouteQueryParamsSubscription = this.activatedRoute.queryParams.subscribe(params => {
      console.log('AppComponent - ngOnInit() -- Subscription Query Params: ' + params['code']);
    });

    this.activatedRoute.queryParamMap.subscribe(queryParams  => {
      console.log('AppComponent - ngOnInit() -- Subscription Query ParamMap: ' + queryParams.get('code'));
    });

    this.routerEventsSubscription = this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        console.log('AppComponent - ngOnInit() -- Subscription NavigationEnd: URL=', event.url);
      }
    });
  }

如您所见，我为params、queryParams、queryParamMap 和router.events 设置了订阅。

在页面导航之间触发的唯一一个是 router.events，但在那里，我必须手动解析 URL 以获取查询字符串。

不确定这是否对其有任何影响，但我正在覆盖路由重用策略，因此即使页面在同一路由上也会重新加载：

export class AppRoutingModule {
  constructor(private router: Router) {
    this.router.routeReuseStrategy.shouldReuseRoute = function() {
        return false;
    };
  }
}

第一次访问时根页面的输出：

AppComponent - constructor() -- Snapshot Params: undefined
AppComponent - constructor() -- Snapshot Query Params: undefined
AppComponent - ngOnInit() -- Snapshot Params: undefined
AppComponent - ngOnInit() -- Snapshot Query Params: undefined
AppComponent - ngOnInit() -- Snapshot Query ParamMap: null
AppComponent - ngOnInit() -- Subscription Params: undefined
AppComponent - ngOnInit() -- Subscription Query Params: undefined
AppComponent - ngOnInit() -- Subscription Query ParamMap: null
AppComponent - ngOnInit() -- Subscription NavigationEnd: URL= /?code=logged-out

解决方案

正如@Thomaz 和@Nathan 都指出的那样，我的问题是App.Component 不在router-outlet 内。

此外，@Nathan 还指出：

您可以访问路由器事件并在任何您想要的地方迭代它们但是在应用程序中，这就是为什么您的 router.events.subscribe(...) 触发器。

然后我在我的路线上启用了跟踪：

RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', enableTracing: true })

看到ActivationEnd 事件包括一个snapshot，它具有查询参数。最后，如果事件是ActivationEnd，我将订阅路由器事件并处理我的查询字符串值。

this.router.events.subscribe(event => {
      if(event instanceof ActivationEnd) {
        const code = event.snapshot.queryParams['code'];
        if (code) {
          // handle it...
        }
      }
}

【问题讨论】：

当您转到应用程序的“根”路径时，console.log() 会发生什么情况？他们开火了吗？
我猜这个答案可以解决你的问题：stackoverflow.com/a/54163848/6061376

标签： angular typescript angular-routing angular-router angular-router-params

【解决方案1】：

ActivatedRoute 可以从通过router-outlet 加载的组件订阅。由于AppComponent 不是通过任何出口加载的，因此您不能在其中订阅ActivatedRoute 参数。重用策略对此没有影响。

从文档https://angular.io/api/router/ActivatedRoute 我们知道以下内容：

[ActivatedRoute] 包含有关与在插座中加载的组件关联的路由的信息。

没有插座加载AppComponent，因此您的订阅不会触发。您可以访问路由器事件并在应用程序中的任意位置对其进行迭代，这就是您的router.events.subscribe(...) 触发的原因。

【讨论】：