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