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

Question

I have this simple Service which is a provider in two Modules:

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

Unfortunately, nowhere I use it acquired the chosen value. Using it outside its Module gives only the default value, using it inside its Module gives no value.

Full test-case: https://stackblitz.com/edit/angular-aru94g-2djexv

Answer 1

Services are singletons within the scope of an injector. Define the PlatformPickerService as provider in app module or root module and make it as singleton service. This will be application scoped singleton service.

Ok, Issue with your PlatformPickerComponent. You have to send the selected value to updateService.

• Property Binding -[] => Component to Template -- one way binding, Changing value doesn't update the property in component

  [value]="platformSelected"

• Event Binding - () => Template to component

  (change)="updateService($event.value)"

• PlatformPickerService moved to app module for this example and set as application scoped provider.

Please check the sample app and demo .

Default platform value set in PlatformPickerService whenever change this it is reflected in drop down box as selected value.

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

Answer 2

Finally got it working: https://angular-aru94g-w6qy21.stackblitz.io ( edit )

Major changes were:

Component

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>

Module

• Only have PlatformPickerService in one Module (app.module)

---

Now it's time to try rewriting the setters/getters once more and see if that'll work ( setPlatform to set platform ) =3

Answer 3

You've missed two-way binding in the PlatformPickerComponent Add import of FormsModule into the PlatformPickerModule and change the PlatformPickerComponent as below:

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

I made couple of changes to your existing code. If you are using two way binding then you can skip ngModelChange Otherwise use oneway binding along with ngModelChange as follows.

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

and you updateService function as follows

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

you can check the code here https://angular-aru94g-agtn1m.stackblitz.io