angulardart: как StreamController работает в следующем примере?

Question

Я читаю учебник .

Пример 1:

Библиотека / 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()));
  }
}

Библиотека / 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, а не Stream. Я прав?

2, heroes в <a *ngFor="let hero of heroes"> составляет Stream<List<Hero>> heroes?

3, heroes инициализируется в ngOnInit(), а stream присваивается heroes. Я не могу понять, как heroes обновляются. Может кто-нибудь объяснить мне процесс?

4, я также читаю сеанс Custom events в https://webdev.dartlang.org/angular/guide/template-syntax. Коды следующие. (Пример 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

Вот несколько ответов на ваш многочастный вопрос:

1. В void search(String term) => _searchTerms.add(term); к _searchTerms добавляется термин, который представляет собой StreamController, а не Stream. Я прав?

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, в первом примере свойство heroes подключено к потоку.

heroes - это поток, полученный следующим образом: начните с потока из контроллера, но примените к нему некоторые преобразования (debounce и т. Д.).

4. ... $event это просто hero. Я прав? Могу ли я считать deleteRequest event?

Да, значение $event будет экземпляром Hero, который необходимо удалить. Да, "deleteRequest" - это имя обычая, даже запускаемого.