时间戳

首页 > 解决方案 > Angular 7：无法从组件之间共享的服务中获取价值

angular - Angular 7：无法从组件之间共享的服务中获取价值

问题描述

我有一个带有 setter 和 getter 的服务类

@Injectable()
export class DataService {
    name: string;

    getName(): string {
       return this.name
    }

    setName(newname: string) {
        this.name = newname;
    }

}

我也在 app.module 中定义了这个

providers: [ DataService ]

并在一个组件中设置名称并尝试从另一个组件中检索。我不确定。

标签： angular

解决方案

您的组件可能getName在任何有机会调用setName. 你可能在ngOnInit. 我建议你试试这个 Subject-Observable 模式（不要忘记从 rxjs 导入你需要的任何东西）：

服务.ts

name: string; // not always necessary/desired
nameSub: BehaviorSubject<string> = new BehaviorSubject(''); // initializing with empty string--could be anything you want
getName: Observable<string> = this.nameSub.asObservable();

setName (name: string) {
  this.name = name; // not always necessary/desired
  this.nameSub.next(name);
}

任何组件.ts

myName: string;
sub: Subscription;

ngOnInit () {
  this.sub = dataService.getName.subscribe(name => {
    // assign name to local variable or class property, for example:
    this.myName = name;
  });
}

inputHandler (event) {
  // calling this method will automatically update `myName` through the subscription in ngOnInit!
  dataService.setName(event.name);
}

// Don't forget to unsubscribe when you create your own subscriptions
ngOnDestroy () {
  this.sub.unsubscribe();
}

这种模式允许您将状态保存在一个地方（服务），但也可以通过利用 RxJs Observables 在任何地方发生任何变化时得到通知。

您可以在此处阅读有关 BehaviorSubjects 和其他内容的信息：http ://reactivex.io/rxjs/manual/overview.html#behaviorsubject

推荐阅读