Angular-如何从组件到组件订阅数据

Question

我正在尝试从组件预订数据。 某种程度上它现在不起作用了，希望任何人都能找到原因...

app.component.html

<app-sample1></app-sample1>
<p></p>
<app-sample2></app-sample2>

sample1.component.html

<div class="main">
    <p>Sample1 !</p>
    Subsribed Title from Sample 2:
    <h3> {{titleFromSample2}}</h3>
</div>

sample2.component.html

<div class="main">
    <p>Sample2 !</p>
    <input type="text" #title (input)="change(title.value)">
</div>

sample.service.ts / sample1.component.ts / sample2.component.ts

在Sample2输入框中插入文本值时， sample2.componet.ts中的'change'方法实现得很好。

但sample1.component.ts和sample1.component.html的titleFromSample2值不变。

我找不到错在哪里......

Answer 1

那是因为您要从Observable返回一个getTitle，而该{本质上是单播。这意味着，它不会对title中SampleService属性值的变化做出反应。

要使其多播，您必须改为使用Subject或BehaviorSubject。

类似这样的东西：

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';

@Injectable()
export class SampleService {

  private title: BehaviorSubject<string> = new BehaviorSubject<string>(null);

  constructor() { }

  setTitle(value: string) {
    this.title.next(value);
  }

  getTitle(): Observable<string> {
    return this.title.asObservable();
  }

}

此外，由于这将随着时间的推移而发出多个值，并且当它们随着时间的推移而发出多个值时，实际上不建议在subscribe至Observable中使用它们，因此您应该使用{{1} }替换为模板中的管道。

所以您的组件看起来像这样：

async

然后在模板中：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { SampleService } from '../sample.service';

@Component({
  selector: 'app-sample1',
  templateUrl: './sample1.component.html',
  styleUrls: ['./sample1.component.css']
})
export class Sample1Component implements OnInit {

  titleFromSample2$: Observable<string>;

  constructor(private sampleService: SampleService) { }

  ngOnInit() {
    this.titleFromSample2$ = this.sampleService.getTitle();
  }

}

---

  

这是您推荐的Working Demo。

Answer 2

问题在于SampleService存储标题值，但不会发出新值。将title更改为title = new BehaviorSubject('');

然后进入setTitle：

setTitle(value: string) {
  this.title.next(value);
}

应该这样做。