So rufen Sie Methoden für Unterkomponenten in Angular Dart auf?

Question

Ich baue eine Komponente mit Rollen. Dies ist die Komponenten-Quellcode

role_chooser_comp.html

<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> 

es besteht aus mehrere Artikel role_item.html

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

Jetzt möchte ich alle in der Lage sein abzuwählen Elemente außer dem, der gedrückt wird. Dafür habe ich einen wählen @output in jedem Element die Eltern zu informieren:

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); 
    } 
} 

Das alles funktioniert sehr gut, aber in meiner Rolle Chooser, möchte ich die Kinder Komponenten in einer Liste setzen, um Schleife in der Lage sein Über sie wählen und sie jeweils abwählen.

Gibt es (im Idealfall) eine Möglichkeit, das zu tun, ohne dass die Kindertypen im Elternteil referenziert werden? (um den Blick vom Controller unabhängig zu halten)?

danke für Ihre Hilfe!

Answer 1

In RoleChooser können Sie @ViewChildren

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

@ViewChildren(RoleItem) 
QueryList<RoleItem> items; 

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