Question

我想集中读取我整个应用程序中特定查询字符串参数的位置/方式，因此我认为最好的位置在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，该事件具有queryParams。最后，如果该事件为ActivationEnd，我将订阅路由器事件并处理我的querystring值。

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

Answer 1

可以从通过ActivatedRoute加载的组件中订阅

router-outlet。由于AppComponent没有通过任何插座加载，因此您无法在其中订阅ActivatedRoute参数。重用策略对此没有影响。

根据文档https://angular.io/api/router/ActivatedRoute，我们了解以下内容：

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

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

无法从App.Component读取querystring参数

1 个答案: