angular - Angular 5 - 将数据从 URL 加载到提供程序中，以便在应用程序中随处可用

Question

我有一个编码的 URL 参数，我需要在应用程序初始化时对其进行解码。我需要在提供程序中执行此操作，因为该对象需要可用于路由保护和组件。

我有以下提供者。它抓取传入的查询参数并将其解析为接口。

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MyObject } from './data.d';

@Injectable()
export class DataProvider {

    constructor(private route: ActivatedRoute) { }

    public get() {
      debugger;
      this.route.queryParams.subscribe(params => {
        let payload = params['data'] !== undefined ? Base64.decode(params['data']) : null;
        return payload ? <MyObject>JSON.parse(payload) : null;
      });
    }
}

我在如何将其添加到我的提供程序数组以及如何从应用程序中的其他位置（特别是路由保护）访问它的语法上遇到问题。设置它的正确方法是什么？

编辑：似乎在初始化提供程序时查询参数不可用。我在哪里可以在组件以外的地方解析查询参数？我需要能够在路由保护中访问它。

app.guard.ts：

import { Injectable } from '@angular/core';
import { Router, RouterStateSnapshot, ActivatedRouteSnapshot, CanActivate } from '@angular/router';
import { SessionService } from './services/session.service';
import { DataProvider } from './data.provider';

@Injectable()
export class SessionIsValidGuard implements CanActivate {

    constructor(
        private router: Router, private sessionService: SessionService, private dataProvider: DataProvider
    ) {}

    /*
    * Main guard to verify that session ID is valid before proceeding
    */
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      // When the below is called, dataProvider.get() returns null
      let params = this.dataProvider.get();
      if (this.sessionService.isValidSessionId(params.transactionId)) {
        return true;
      } else {
        this.router.navigate(['/error', { error: 'Invalid session' }]);
      }
    }
}

app.component.ts：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { DataProvider } from './data.provider';

/*
* Main app component that houses all views.
*/
@Component({
    selector: 'app-comp',
    templateUrl: './app.component.html'
})

export class AppComponent implements OnInit {

    constructor(private router: Router, private route: ActivatedRoute, private srcService: SRCService, private dataProvider: DataProvider) {}

    ngOnInit() {
      // Here dataProvider.get() returns the expected value
      console.log(this.dataProvider.get());
    }
}

标签： angularangular5angular2-routingangular-providers

Answer 1

你可以简单地去

@Injectable({
    providedIn: 'root'
})

让您的提供商随处可用。