代码之家 › 专栏 › 技术社区 › BAE

安格拉达特:streamcontroller在下面的例子中是如何工作的?

angular-dart dart angularjs-directive angular

BAE · 技术社区 · 6 年前

我正在读 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 ,这是一个 流量控制器 ,不是 Stream .我说得对吗?

2,那个 heroes 在里面 <a *ngFor="let hero of heroes"> 是 Stream<List<Hero>> heroes 是吗?

三, 英雄 在中初始化 ngOnInit() 以及 stream 分配给 英雄 是的。我不明白 英雄 已更新。有人能给我解释一下这个过程吗?

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 是吗?

5,在第一个示例中,property 英雄 连接到流。在第二个例子中,流是 bind 参加一个活动 删除请求 是的。我说得对吗?

欢迎任何暗示。谢谢

1 回复 | 直到 6 年前

Patrice Chalin 6 年前

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

在 void search(String term) => _searchTerms.add(term); ,一个术语被添加到 _searchTerms ,这是一个 StreamController ,不是 Stream .我说得对吗?

一个 流量控制器 顾名思义,控制流。当您调用 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 是按如下方式获得的流:从控制器的流开始,但对其应用一些转换(去噪等)。

… $event 只是 hero 是的。我说得对吗?我能考虑一下吗 deleteRequest 成为 event 是吗?

是的价值 $事件 将会是 Hero 要删除的实例。是的,“deleterequest”是自定义的名称,即使被触发。