Angular 5：服务在组件之间（跨模块）共享数据？

Question

我有这个简单的服务，它是两个模块中的 provider：

@Injectable()
export class PlatformPickerService {
  platforms: string[] = [
    'macOS', 'Linux', 'Windows'
  ];
  public platform: string;

  constructor() {
    this.platform = this.platforms[1];
  }

  public getPlatform(): string {
    const platform = localStorage.getItem('platform');
    return platform == null ? this.platform : platform;
  }

  public setPlatform(platform: string) {
    this.platform = platform;
    localStorage.setItem('platform', platform);
  }
}

不幸的是，我在任何地方都没有使用它获取所选的值。在其 Module 之外使用它仅提供默认值，在其 Module 内部使用它没有任何价值。

完整测试用例：https://stackblitz.com/edit/angular-aru94g-2djexv

Answer 1

服务是注入器范围内的单例。在应用程序模块或根模块中将 PlatformPickerService 定义为提供者，并将其作为单例服务。这将是应用程序范围的单例服务。

好的，您的 PlatformPickerComponent 有问题。您必须将选定的值发送到 updateService。

属性绑定 -[] => 组件到模板 -- 一种绑定方式，更改值不会更新组件
中的属性

[value]="platformSelected"
事件绑定 - () => 模板到组件

(change)="updateService($event.value)"
PlatformPickerService 已移至此示例的应用程序模块并设置为应用程序范围的提供程序。

请检查sample app and demo。

在 PlatformPickerService 中设置的默认平台值每当更改时都会反映在下拉框中作为所选值。

  constructor() {
    this.platform = this.platforms[4];
  }

Answer 2

您错过了 PlatformPickerComponent 中的双向绑定将 FormsModule 的导入添加到 PlatformPickerModule 并更改 PlatformPickerComponent 如下：

<mat-form-field>
  <mat-select placeholder="Platform" shouldLabelFloat="false" [(ngModel)]="platform">
    <mat-option *ngFor="let platform of platformPickerService.platforms"
                [value]="platform">
      {{ platform }}
    </mat-option>
  </mat-select>
</mat-form-field>



import {AfterViewInit, Component, OnInit} from '@angular/core';

import {PlatformPickerService} from './platform-picker.service';

@Component({
  selector: 'platform-picker',
  templateUrl: './platform-picker.component.html',
  styleUrls: ['./platform-picker.component.css']
})
export class PlatformPickerComponent implements OnInit, AfterViewInit {
  private _platform: string;

  constructor(public platformPickerService: PlatformPickerService) {
  }

  ngOnInit() {
    this._platform = this.platformPickerService.getPlatform();
  }

  ngAfterViewInit() {
  }

   get platform(): string {
    return this._platform;
  }

  set platform(value: string) {
    if (value != null) {
      this.platformPickerService.setPlatform(value);
      this._platform = value;
    }
  }
}

Answer 3

我对您现有的代码进行了一些更改。如果您使用双向绑定，那么您可以跳过 ngModelChange 否则使用单向绑定和 ngModelChange 如下。

<mat-form-field>
  <mat-select [ngModel]="selected" (ngModelChange)="updateService($event)"  placeholder="Platform" shouldLabelFloat="false" [(value)]="selected">
    <mat-option *ngFor="let platform of platformPickerService.platforms"
                [value]="platform">
      {{ platform }}
    </mat-option>
  </mat-select>
</mat-form-field>

你updateService函数如下

updateService(newPlatform) {
    console.log(newPlatform);
    if (newPlatform != null) {
      this.selected = newPlatform;
      this.platformPickerService.setPlatform(this.selected);
    }
  }

你可以在这里查看代码 https://angular-aru94g-agtn1m.stackblitz.io

Answer 4

终于成功了：https://angular-aru94g-w6qy21.stackblitz.io (edit)

主要变化是：

组件

updateService(event: any) {
    if (event.value != null) this.platformPickerService.setPlatform(event.value);
}

<mat-form-field>
  <mat-select placeholder="Platform" shouldLabelFloat="false"
              [(ngModel)]="platformSelectd"
              (selectionChange)=updateService($event)>
    <mat-option *ngFor="let platform of platformPickerService.platforms"
                [value]=platform>
      {{ platform }}
    </mat-option>
  </mat-select>
</mat-form-field>

模块

一个模块中只有 PlatformPickerService (app.module)

现在是时候再次尝试重写 setters/getters 看看是否可行（setPlatform 到 set platform）=3

Angular 5：服务在组件之间（跨模块）共享数据？

Angular 5: Service to share data between Components (across Modules)?

dependency-injection

angular-services

angular-module

angular-material2

angular

组件

模块