我们如何在Angular 2+中的模块内发送数据

时间:2018-12-19 06:33:41

标签: javascript angular angular-module

我被困在将一小部分数据从一个模块发送到另一模块上。我不会将这些数据存储在查询参数中或某些浏览器级别的存储或缓存中。我可以使用哪些选项,或者angular有什么机制可以做到这一点而无需重新加载我的应用程序。

2 个答案:

答案 0 :(得分:1)

服务是为相同的目的而设计的(依赖注入)

pause

在组件(app.module.ts)的父模块或根模块中提供此服务

将服务注入组件

@Injectable()
export class SomeService {
//define a variable
someVariable = "xyz";
}

//在此处更新变量

one.component.ts
constructor(private someService: SomeService) {

}

答案 1 :(得分:1)

您可以创建共享服务。然后,您可以在两个模块中订阅该服务并共享数据。

例如:

这是我在模块之间共享的http服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { APIUrls } from '../Enums/api-url.enum';
import { HttpResponse } from 'selenium-webdriver/http';
import { SessionStorageService } from './session-storage.service';
import { SessionStorageKeys } from '../Enums/session-storage-keys.enum';

@Injectable()
export class HttpService {

  constructor(private _http: HttpClient, private _sessionService: SessionStorageService) {

  }

  public PostRequest(apiURL: string, body: any): Observable<HttpResponse> {
    let auth_token = this._sessionService.get(SessionStorageKeys.AUTH_TOKEN);
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + auth_token
      })
    };
    return this._http.post(APIUrls.BaseURL + apiURL, body, httpOptions);
  }

  public GetRequest(apiURL: string): Observable<HttpResponse> {
    let auth_token = this._sessionService.get(SessionStorageKeys.AUTH_TOKEN);
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + auth_token
      })
    };
    return this._http.get(APIUrls.BaseURL + apiURL, httpOptions);
  }

  private _transformRequest(obj: any): any {
    var str = [];
    for (var p in obj)
      if (obj.hasOwnProperty(p)) {
        str.push(encodeURIComponent(p) + ":" + encodeURIComponent(obj[p]));
      }
    return str;
  }

}

我在 app.module.ts

提供者数组中添加了此服务

然后将该服务注入到不同模块中的组件的构造函数中