angulardart：在以下示例中 StreamController 是如何工作的？

Question

我正在阅读 tutorial。

示例 1：

lib/src/hero_search_component.飞镖

class HeroSearchComponent implements OnInit {
  HeroSearchService _heroSearchService;
  Router _router;
  Stream<List<Hero>> heroes;
  StreamController<String> _searchTerms =
      new StreamController<String>.broadcast();
  HeroSearchComponent(this._heroSearchService, this._router) {}
  // Push a search term into the stream.
  void search(String term) => _searchTerms.add(term);
  Future<Null> ngOnInit() async {
    heroes = _searchTerms.stream
        .transform(debounce(new Duration(milliseconds: 300)))
        .distinct()
        .transform(switchMap((term) => term.isEmpty
            ? new Stream<List<Hero>>.fromIterable([<Hero>[]])
            : _heroSearchService.search(term).asStream()));
  }
}

lib/src/dashboard_component.html

<h3>Top Heroes</h3>
<div class="grid grid-pad">
  <a *ngFor="let hero of heroes"  [routerLink]="['HeroDetail', {id: hero.id.toString()}]"  class="col-1-4">
    <div class="module hero">
      <h4>{{hero.name}}</h4>
    </div>
  </a>
</div>
<hero-search></hero-search>

我对 StreamController 的工作原理感到困惑。我有一些问题：

1、在void search(String term) => _searchTerms.add(term);中，_searchTerms加了一个term，是StreamController，不是Stream。我说得对吗？

2、<a *ngFor="let hero of heroes">中的heroes是Stream<List<Hero>> heroes?

3、heroes在ngOnInit()中初始化，一个stream赋值给heroes。我无法理解 heroes 是如何更新的。谁能给我解释一下过程吗？

4，我也在看https://webdev.dartlang.org/angular/guide/template-syntax的Custom events课。代码如下。（示例 2）

final _deleteRequest = new StreamController<Hero>();
@Output()
Stream<Hero> get deleteRequest => _deleteRequest.stream;

void delete() {
  _deleteRequest.add(hero);
}

<hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></hero-detail>

在上面的代码中，hero被添加到_deleteRequest。 deleteRequest 是自定义事件，触发后 $event 传递给 deleteHero() 函数。 $event 就是 hero。我对吗？我可以将 deleteRequest 视为 event 吗？

5、在第一个例子中，属性 heroes 连接到一个流。在第二个示例中，流是 bind 到事件 deleteRequest。我说得对吗？

欢迎任何提示。谢谢

Answer 1

以下是您的多部分问题的一些答案：

In void search(String term) => _searchTerms.add(term);, a term is added to _searchTerms, which is a StreamController, not a Stream. Am I right?

A StreamController，顾名思义，控制一个流。当您调用 StreamController.add().

时，值将被送入该流

这里是lib/src/hero_search_component.html:

<div id="search-component">
  <h4>Hero Search</h4>
  <input #searchBox id="search-box"
        (change)="search(searchBox.value)"
        (keyup)="search(searchBox.value)" />
  <div>
    <div *ngFor="let hero of heroes | async"
        (click)="gotoDetail(hero)" class="search-result" >
      {{hero.name}}
    </div>
  </div>
</div>

注意：<input ... (keyup)="search(searchBox.value)" />。在输入搜索框中键入每个键后（在 keyup 上），HeroSearchComponent.search(String term) 方法被调用，后者又调用 StreamController.add()。这就是将价值注入流中的方式。

5, In the first example, property heroes is connected to a stream.

heroes 是如下获得的流：从来自控制器的流开始，但对其应用一些转换（去抖动等）。

... $event is just hero. Am I right? Can I consider deleteRequest to be a event?

是的，$event 的值将是要删除的 Hero 个实例。是的，"deleteRequest" 是甚至被解雇的习俗的名称。

angulardart：在以下示例中 StreamController 是如何工作的？

angulardart: how StreamController works in the following example?

dart

angularjs-directive

angular-dart

angular