Question

我正在阅读tutorial。

示例1：

lib / src / hero_search_component.dart

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，而不是StreamController。我说的对吗？

2，Stream中的heroes是<a *ngFor="let hero of heroes">吗？

3，Stream<List<Hero>> heroes在heroes中初始化，并且ngOnInit()被分配给stream。我不了解heroes是如何更新的。谁能向我解释这个过程？

4，我也在阅读https://webdev.dartlang.org/angular/guide/template-syntax中的heroes会话。代码如下。（示例2）

Custom events

在以上代码中，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吗？

5，在第一个示例中，属性event连接到流。在第二个示例中，流是事件heroes的{{1}}。我说的对吗？

欢迎任何提示。谢谢

Answer 1

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

在void search(String term) => _searchTerms.add(term);中，将术语添加到_searchTerms，而不是StreamController。我说的对吗？

顾名思义，Stream控制着一个流。调用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)" />方法，该方法依次调用HeroSearchComponent.search(String term)。这就是将值注入流中的方式。

5，在第一个示例中，属性英雄连接到流。

StreamController.add()是按以下方式获得的流：从控制器的流开始，但对其进行一些转换（去抖动等）。

... heroes只是$event。我对吗？我可以认为hero是deleteRequest吗？

是的event的值将是要删除的$event实例。是的，“ deleteRequest”甚至是被触发的自定义名称。

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

1 个答案: