Angular dart의 하위 구성 요소에서 메서드를 호출하는 방법은 무엇입니까?

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

(이상적으로) 부모 유형에서 어린이 유형을 재생성하지 않으면 어떻게 할 수 있습니까? (보기를 컨트롤러와 독립적으로 유지하려면)?

도움 주셔서 감사합니다.

Answer 1

RoleChooser, 당신은, 당연히 @ViewChildren

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

@ViewChildren(RoleItem) 
QueryList<RoleItem> items; 

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