Angular 5:组件之间共享数据的服务(跨模块)?
我有这个简单的服务,这是一个两provider
模块:Angular 5:组件之间共享数据的服务(跨模块)?
@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://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
服务是一个喷射器的范围之内的单身。将PlatformPickerService定义为应用程序模块或根模块中的提供者,并将其作为单例服务。这将是应用程序范围的单身服务。
好的,问题与您的PlatformPickerComponent。您必须将选定的值发送到updateService。
-
属性绑定 - [] =>组件到模板 - 一种结合方式, 变更值在组件不更新属性
[值] = “platformSelected”
-
事件绑定 - ()=>模板与组分
(三“更新服务($ event.value)”
PlatformPickerService已移至此示例的应用程序模块并设置为应用程序作用域提供程序。
请检查sample app和demo。
在PlatformPickerService中设置的默认平台值每当更改时都会在下拉框中显示为选定值。
constructor() {
this.platform = this.platforms[4];
}
我在app.module中有。我试着把它从platform-picker.module中取出来,把它从app.module中取出来;错误遗留:( –
评论到您的编辑:我试着把'updateService'放入'{{'模板;同样的错误 –
@AT更新了你的应用程序的一些小修改hth – nayakam
你已经错过了两路在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;
}
}
}
是的,我有点欺骗了这两种方式,因为'(selected)= updateService()'没有被调用;所以它使用'[value]'命中了模型,因此你找到的修复不起作用,对吧? - PS:我在我的服务中有'获取平台'和'设置平台',但是我在Gitter/angular的人告诉我之后将其取出。他们可以使用吗? –
我做了一些改动,以现有的代码。 如果您使用双向绑定,那么您可以跳过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
更改服务中的默认值是否在下拉框中生效? – nayakam
是的,它的确如此。 –
是吗?在你的演示中,默认显示MacOS,但在PlatformPickerService默认值设置为“Linux”的平台[1]。 – nayakam