Question

我授予您的头衔确实不清楚。我在一个组件中有一个变量，我想在另一个组件中使用它。我创建了一个可观察的服务，以便能够传输我的数据。我将数据发送到服务，然后转到将检索此数据的页面。

        this.service.myMethod(this.ville);
        this.router.navigateByUrl('tabs/resto-by-ville');

我得到数据并像这样使用它：

getDataByVille() {
    this.service.myMethod$.subscribe((city) => {
        this.city = city;
        this.http.get<Etablissement[]>('http://127.0.0.1:8000/api/etablissements/' + this.city).subscribe((data) => {
            this.dataByVille = data;
            console.log(this.dataByVille);
        });
    });
}

ngOnInit() {
    this.getDataByVille();
}

我的服务：

export class GetDataByVilleService {
    myMethod$: Observable<string>;
    private myMethodSubject = new Subject<string>();

    constructor() {
        this.myMethod$ = this.myMethodSubject.asObservable();
    }

    myMethod(data) {
        console.log(data);
        this.myMethodSubject.next(data);
    }

我的问题是，当我发送数据时，绝对没有任何反应。如果我第二次重复，它将起作用。我不明白为什么它第一次不起作用。你有好主意吗？当前它对用户体验不是很友好

Answer 1

问题在于主体没有存储值，所以当您到达“制表符/ resto-by-ville”页面时，发射已经发生。

您应该使用BehaviorSubject而不是Subject，例如：

private myMethodSubject = new BehaviorSubject <string>(null);

BehaviorSubject存储您给它的最后一个值，并在您订阅它后立即发出它。

Answer 2

您将可观察的模式全部弄错了。它们应该像这样链接：

服务：

export class GetDataByVilleService {
  getDataByVille(): Observable<Etablissement[]> {
    return this.http.get<Etablissement[]>('http://127.0.0.1:8000/api/etablissements/' + this.city)
  });
}

组件：

// Component under "tabs/resto-by-ville"
export class RestoByVilleComponent {
  dataByVille: Etablissement[];

  constructor(getDataByVilleService: GetDataByVilleService )
  ngOnInit() {
    this.getDataByVilleService.getDataByVille().subscribe(dataByVille => {
      this.dataByVille = dataByVille;
    });
  }
}

无需从要导航的组件中调用服务。

我的角度函数不在第一次调用时执行。它仅在第二次调用时执行

2 个答案: