私はロールを含むコンポーネントを構築しています。これは、コンポーネントのソースコード角ダーツでサブコンポーネントのメソッドを呼び出す方法は?
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
で
を使用することができます。 (選択肢でRoleItemアイテム){ 場合について (!item.role =役割){ item.selected =偽; } } } 問題は解決しましたが、コントローラに表示されないようにする方法はありますか? 理想的には、私はアイテムのテーブルを作成したいとテーブル項目の何も知らずに選択し、キーバインディングを処理したい... –