Question

我正在阅读该应用的网址http://localhost/?config=preprod

我正在尝试创建一个Singleton服务，该服务读取 UrlParameters.js 并公开get(key)方法。哪家商店config=preprod 类似如下（来自我的Angular 1.x单身人士服务）

get: function (key) {
            if (!params) {
                params = {};
                var queryString = window.location.search.substring(1);
                _(queryString.split('&')).each(function (param) {
                    var val = param.split('=');
                    params[val[0]] = val[1];
                });
            }
            return params[key];
        }

现在，我想我也需要在Angular 2中访问此服务中的Route params，因为我不能在Angular 2中进行。

此外，我需要与另一个名为Flag的Singleton服务共享此UrlParams单例。哪个读取Flag.get（＆＃39; config＆＃39;）下面的内容（从我的Angular 1.x项目中提取）的 Flag.js

set: function (flag) {
            if (UrlParameter.get(flag)) {
                localStorage.setItem(flag, UrlParameter.get(flag));
            }
        },
        get: function (flag) {
            return localStorage.getItem(flag);
        }

Answer 1

根据@JordanFrankfurt的建议，我使用了位置服务，符合我的目的。还要感谢@GünterZöchbauer的努力。

以下是我的UrlParams服务，该服务也已添加到providers

下的NgModule中

url-parameter.service.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/filter';
import {LocationStrategy} from '@angular/common';

@Injectable()
export class UrlParameterService {
  public params = null;

  constructor(private location: LocationStrategy) {}

  get(key:string):String {
    debugger;
    if (!this.params) {
      this.params = {};
      var queryString = this.location.path();
      queryString.split('&').forEach((param) => {
        var val = (param.indexOf('?') ? param.slice(param.indexOf('?')+1).split('=') : param.split('='));
        this.params[val[0]] = val[1];
      });
    }
    return this.params[key] || false;
  }

}

Answer 2

这可能会做你想要的：

@Injectable() 
class MyService {
  constructor(router:Router) {
    this.router.events
    .filter(e => e instanceof NavigationEnd)
    .forEach(e => {
       var config = router.routerState.root.snapshot.param['config'];
       console.log(config);
    });
  }
}

Answer 3

我会尝试保持Angular 2约定，但是如果你只想要一个你在Angular 2约定之外实例化的实例，那就非常简单了。

var UrlParameters = function() {

    this.instance  = this;
    this.params = null;

    this.get = function(key) {
        if (!this.params){

        params = {};

            var queryString = window.location.search.substring(1);

            _(queryString.split('&')).each(function (param) {
                var val = param.split('=');
                params[val[0]] = val[1];
            });

            this.params = params;

        }

        return this.params[key];
    };

    this.set = function() {

    }
}

var Flag = {
    set: function (flag) {
            var urlParams = UrlParameter.getInstance();

            if (urlParams.get(flag)) {
                localStorage.setItem(flag, UrlParameter.get(flag));
            }
        }
}

TypeScript版本

class UrlParameter {

    static instance:UrlParameter;

    constructor() {
        UrlParameter.instance = this;
    }

    get( key: string) : string {
    //  ... 
    }
}

class Flag {

    set(key:string) : string {
        if (UrlParameter.instance.get(key)){
            // you have it
        }
    }
}

如何在Angular 2中创建Singleton服务并读取URL Params

3 个答案: