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

終於得到它的工作：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）

---

現在是時候嘗試重寫制定者/吸氣再一次，看看是否會工作（setPlatform到set platform）= 3

Answer 2

服務是一個噴射器的範圍之內的單身。將PlatformPickerService定義爲應用程序模塊或根模塊中的提供者，並將其作爲單例服務。這將是應用程序範圍的單身服務。

好的，問題與您的PlatformPickerComponent。您必須將選定的值發送到updateService。

• 屬性綁定 - [] =>組件到模板 - 一種結合方式， 變更值在組件不更新屬性

  [值] = 「platformSelected」

• 事件綁定 - （）=>模板與組分

  （三「更新服務（$ event.value）」

• PlatformPickerService已移至此示例的應用程序模塊並設置爲應用程序作用域提供程序。

請檢查sample app和demo。

在PlatformPickerService中設置的默認平臺值每當更改時都會在下拉框中顯示爲選定值。

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

Answer 3

你已經錯過了兩路在FormsModule的PlatformPickerComponent 添加導入綁定到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 4

我做了一些改動，以現有的代碼。 如果您使用雙向綁定，那麼您可以跳過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