Jak stworzyć usługę w Singleton kątowej 2 i czytać URL Params

Question

Im czytanie URL aplikacji http://localhost/?config=preprod

Im próbuje utworzyć usługę Singleton, który brzmi UrlParameters.js i naraża get(key) metody. Która przechowuje config=preprod Podobny poniżej (z mojego Kątowymi usługi 1.x singleton)

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]; 
     } 

Teraz, myślę, że też będzie potrzebował dostępu do params Route wewnątrz tej usługi kątowej 2, ponieważ nie mogę zrobić w kątowa 2

Muszę również udostępnić ten singiel UrlParams innym usłudze Singleton o nazwie Flag. Który brzmi Flag.get ('config') coś jak poniżej (wyciąg z mojego projektu kątowe 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

Jak sugeruje @JordanFrankfurt użyłem usługę lokalizacyjną i pasuje do mojego celu. Również dzięki @ Günter Zöchbauer za wysiłek.

Poniżej jest moje życzenie UrlParams który został również dodany w NgModule pod providers

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

To może robić to, co chcesz:

@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

Próbowałbym pozostać w konwencji Angular 2, ale jeśli po prostu potrzebujesz instancji czegoś, co stworzyłeś poza konwencjami Angular 2, jest to całkiem proste.

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)); 
      } 
     } 
} 

wersję maszynopisu

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 
     } 
    } 
}