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

Question

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

Answer 1

服务是为相同而设计的（依赖注入）

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

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

将服务注入组件

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

}

//在此处更新变量

this.someService.someVariable = "Value Changed"

two.component.ts
constructor(private someService: SomeService) {}
// updated variable can be accessed here
console.log(this.someService.someVariable);

Answer 2

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

例如：

这是我的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的 provider数组中添加了此服务

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