Question

在AngularJs中，如果我想获取查询字符串参数，则可以使用$rootScope并检查参数并将其存储在会话中，这样无论我在应用程序中的位置如何，它都将持久存在。我正在尝试在Angular 5中做类似的事情。

我已经创建了此服务：

import { Injectable } from '@angular/core';
import { ParamMap } from '@angular/router';

import { SessionService } from './session.service';

@Injectable()
export class QueryStringService {
  key: string = 'options';
  options = {
    debugging: false
  };

  constructor(private sessionService: SessionService) { }

  init(paramMap: ParamMap): void {
    // Get any saved session and our query parameters
    var session = this.sessionService.get(this.key);
    var debug = paramMap.get('debug');

    // If we have a saved session, updates our options
    if (session) Object.assign(this.options, session);

    // If we have any query parameters set, update our options
    if (debug === '1') this.options.debugging = true;    

    console.log(paramMap.get('debug'));
    console.log(this.options);

    // Save our options in the session
    this.sessionService.save(this.key, this.options);
  }
}

我将其这样放置在我的 AppComponent 中：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { QueryStringService } from './core/services/query-string.service';

@Component({
  selector: 'piiick-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(
    private route: ActivatedRoute,
    private queryStringService: QueryStringService
  ) {
  }

  ngOnInit() {
    this.route.paramMap.subscribe(paramMap => {
      this.queryStringService.init(paramMap);
    });
  }
}

但是它不起作用。我认为这是因为它没有分配给 AppComponent 的路由。我可以将其添加到整个站点的每个组件中，但我希望有人知道处理此问题的全局方法。

Angular5服务获取自定义查询字符串参数

0 个答案: