角ダーツでサブコンポーネントのメソッドを呼び出す方法は？

Question

私はロールを含むコンポーネントを構築しています。これは、コンポーネントのソースコード

role_chooser_comp.html今

<div class="role" [class.selected]="selected" (click)="clicked()"> 
    <btn 
     [sources]="images"></btn> 
    <span class="title">{{title}}</span> 
    <div class="desc">{{desc}}</div> 
</div> 

は、私はすべての選択を解除できるようにしたい

<div class="roleChooser"> 
    <role-item #owner (select)="selected(owner.role)" [role]="'owner'" [title]="'Owner'" [desc]="'Can write'"></role-item> 
    <role-item #writer (select)="selected(writer.role)" [role]="'writer'" [title]="'Writer'" [desc]="'Can write'"></role-item> 
    <role-item #viewer (select)="selected(viewer.role)" [role]="'viewer'" [title]="'Reader'" [desc]="'Can write'"></role-item> 
</div> 

それが複数の項目で構成されている role_item.htmlです押されたもの以外のアイテム。そのために、私は親に通知するために、各項目で選択@outputを持っている：

import 'package:angular2/core.dart'; 
import 'package:angular2/router.dart'; 

import 'package:share_place/environment.dart'; 
import 'package:share_place/place_service.dart'; 

import 'package:share_place/common/ui/button_comp.dart'; 

@Component(
    selector: 'role-item', 
    templateUrl: 'role_item.html', 
    styleUrls: const ['role_item.css'], 
    directives: const [ButtonComp]) 
class RoleItem { 
    final PlaceService _placeService; 
    final Router _router; 
    final Environment _environment; 
    @Output() final EventEmitter<String> pressAction = new EventEmitter<String>(); 
    @Output() final EventEmitter<String> select = new EventEmitter<String>(); 

    get role => itemRole; 

    @Input() set role(String role) { 
    itemRole = role; 
    images = [ 
     '../images/roles/$role.bmp', 
     '../images/roles/$role-h.bmp', 
     '../images/roles/$role-c.bmp' 
    ]; 
    } 

    @Input() String title; 
    @Input() String desc; 

    String itemRole; 

    List<String> images; 

    bool selected = false; 
    bool toggle = true; 

    RoleItem(this._placeService, this._router, this._environment); 

    void clicked() { 
    bool newlySelected; 
    if (!selected) 
     newlySelected = true; 

    if (toggle) 
     selected = !selected; 
    else 
     selected = true; 

    pressAction.emit(role); 
    if (newlySelected) 
     select.emit(role); 
    } 
} 

すべてこれはかなりうまく動作しますが、私の役割チューで、私はループのことができるようにするには、リスト内の子コンポーネントを配置しますそれらをそれぞれ選択し、それらの選択を解除します。

import 'package:angular2/core.dart'; 
import 'package:angular2/router.dart'; 

import 'package:share_place/environment.dart'; 
import 'package:share_place/place_service.dart'; 

import 'package:share_place/common/ui/button_comp.dart'; 
import 'package:share_place/users/role/role_item.dart'; 

@Component(
    selector: 'role-chooser-comp', 
    templateUrl: 'role_chooser_comp.html', 
    styleUrls: const ['role_chooser_comp.css'], 
    directives: const [RoleItem]) 
class RoleChooser { 
    final PlaceService _placeService; 
    final Router _router; 
    final Environment _environment; 

    RoleChooser(this._placeService, this._router, this._environment); 

    void selected(String role) { 
    print("Role selected : $role"); 
    } 
} 

親子で子どものタイプをリフレクションさせることなく（理想的に）行う方法はありますか？ （ビューをコントローラと独立に保つため）？

ご協力いただきありがとうございます。 RoleChooserで

Answer 1

私は 無効選択（文字列の役割）{ 一覧 選択肢= [所有者、ライター、ビューア]を行う場合、あなたは、当然のことながら @ViewChildren

https://webdev.dartlang.org/angular/api/angular2.core/ViewChildren-class

@ViewChildren(RoleItem) 
QueryList<RoleItem> items; 

for (RoleItem item in items) { 
    item.doSomething(); 
}