我仍在学习Angular并尝试查看其BehaviorSubject工作原理，但被困于从何开始。这是我要尝试的地方：
创建一个搜索框组件HeroDetailComponent，在其中输入一些文本，并根据该文本搜索英雄列表，并使用另一个组件向用户显示它们HeroesComponent。现在，应该使用服务组件在的帮助下完成此通信BehaviorSubject。
这是我的主要组成部分：
app.component.html
<app-hero-detail></app-hero-detail>
<app-heroes></app-heroes>
这是我的hero-detail.component.html，我将其用作搜索框：
<div>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name"/>
</label>
</div>
和相应的hero-detail.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
这是我的heroes.component.html，在这里显示搜索结果：
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
及其heroes.component.ts：
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';
import { HeroService } from '../hero.service';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
heroes = HEROES;
constructor(private heroService: HeroService) { }
getHeroes(): void {
// Logic to access heroes list matching search text and display to user
}
ngOnInit() {
this.getHeroes();
}
}
这是我的服务组件：
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable({
providedIn: 'root'
})
export class HeroService {
private searchSource = new BehaviorSubject<string>("");
searchText = this.searchSource.asObservable();
constructor() { }
searchByName(name: string) {
this.searchSource.next(name);
}
}
这是我的英雄榜模拟数据：
import { Hero } from './hero';
export const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
您能帮我实现这个问题吗？
更新：
我按照trichetriche答案中给出的步骤进行操作，但出现以下错误：
ERROR in src/app/hero-detail/hero-detail.component.ts(17,16): error TS2339: Property 'formValue$' does not exist on type 'HeroService'.
src/app/hero-detail/hero-detail.component.ts(17,61): error TS2304: Cannot find name 'startWith'.
src/app/heroes/heroes.component.ts(17,13): error TS2304: Cannot find name 'combineLatest'.
src/app/heroes/heroes.component.ts(19,22): error TS2339: Property 'formValue$' does not exist on type 'HeroService'.
src/app/heroes/heroes.component.ts(21,5): error TS2552: Cannot find name 'map'. Did you mean 'Map'?
如何解决这些错误？
更新：解决了以上错误。现在我开始面对可观察的问题：
Observable.js:54 TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
at subscribeTo (subscribeTo.js:41)
at subscribeToResult (subscribeToResult.js:11)
at CombineLatestSubscriber.push../node_modules/rxjs/_esm5/internal/observable/combineLatest.js.CombineLatestSubscriber._complete (combineLatest.js:62)
at CombineLatestSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.complete (Subscriber.js:66)
at Observable._subscribe (subscribeToArray.js:8)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:43)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:29)
at CombineLatestOperator.push../node_modules/rxjs/_esm5/internal/observable/combineLatest.js.CombineLatestOperator.call (combineLatest.js:32)
at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:24)
at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18)
您能帮我解决这个问题吗？
主题和行为主题是代理：它们既充当可观察者，又充当观察者。
您可以在可能的情况下使代理的观察者做出反应subject.next(value)：主题与行为主题之间的区别在于，主题的观察者将收到代理的当前值（而主题仅会获得代理的值）。下一个next）。
所以基本上
BehaviorSubject === Subject.pipe(startWith(someValue))
现在，您实际上不需要行为主体即可完成您想要的事情。您可以使用一种更简洁的方法来使用反应式及其valueChanges属性。
在您的表单中，使用以下命令：
<div>
<label>name:
<input [formControl]="heroName" placeholder="name"/>
</label>
</div>
export class HeroDetailComponent implements OnInit {
heroName = new FormControl('');
constructor(
private service: HeroService
) {
this.service.formValue$ = this.heroName.valueChanges.pipe(startWith(''));
}
}
您将创建一个表单控件，然后将服务注入到组件中，最后，您将使用valueChanges该表单控件的可观察对象对同级中的英雄进行排序。
在服务中，只需添加一个formValue$: Observable<string>以声明变量。（xx$这只是可观察对象的命名约定，以便快速发现它们）。
您需要startWith操作员触发控件上的第一个值更改（否则，除非您键入内容，否则该值不会更改）
最后，在同级中：
export class HeroesComponent implements OnInit {
private _heroesList$ = new BehaviorSubject(HEROES);
heroes$;
constructor(private heroService: HeroService) { }
getHeroes(): void {
this.heroes$ = combineLatest(
this._heroesList$,
this.heroService.formValue$
).pipe(
map(([list, name]) => list.filter(hero => hero.name.includes(name)))
);
}
ngOnInit() {
this.getHeroes();
}
}
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes$ | async"
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
这样，您就可以创建一个由表单值和列表组成的新流，并映射结果以返回过滤后的英雄列表。您可以使用async管道使angular处理订阅，这是一个好习惯，可防止您忘记取消订阅。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句