我需要一个组件来选择具有双向绑定的用户角色
角色的选择器-comp.html
<div class="roleChooser">
<role-item #owner (select)="role(owner.role)" [role]="'owner'" [title]="'Owner'"></role-item>
<role-item #writer (select)="role(writer.role)" [role]="'writer'" [title]="'Writer'"></role-item>
<role-item #viewer (select)="role(viewer.role)" [role]="'viewer'" [title]="'Reader'"></role-item>
</div>
它的课程如下:
角色的选择器-comp.dart
@Component(
selector: 'role-chooser-comp',
templateUrl: 'role_chooser_comp.html',
styleUrls: const ['role_chooser_comp.css'],
directives: const [RoleItem])
class RoleChooser implements OnInit {
final PlaceService _placeService;
final Router _router;
final Environment _environment;
@ViewChild('owner') RoleItem owner;
@ViewChild('writer') RoleItem writer;
@ViewChild('viewer') RoleItem viewer;
List<RoleItem> choices;
String lastSelected;
RoleChooser(this._placeService, this._router, this._environment) {
}
Future<Null> ngOnInit() async {
choices = [owner, writer, viewer];
if (lastSelected != null)
role(lastSelected);
}
String get selected => lastSelected;
@Input()
set selected(String role) {
//on init, the choices are still not set
if (choices == null)
lastSelected = role;
else
this.role(role);
}
void role(String role) {
if (choices == null) {
window.alert("No roles are set");
return;
}
for (RoleItem item in choices) {
if (item.role == role) {
item.selected = true;
lastSelected = role;
} else {
item.selected = false;
}
}
}
}
现在我需要的是能够在以下用途中自动更新模型的值:
用例
<role-chooser-comp [(selected)]="userRole.roleName"></role-chooser-comp>
或
<role-chooser-comp [(ngModel)]="userRole.roleName"></role-chooser-comp>
我发现了一篇关于angular.js的文章,展示了如何将[(ngModel)]与任何元素一起使用(实现两个方法,因此angular知道如何从组件中获取值并向后):https://docs.angularjs.org/guide/forms(section 实施自定义表单控件(使用ngModel))
我想在飞镖中做同样的事,但我不知道怎么做......
角色项目现在非常简单,我只是粘贴它以供参考:
role-item.html
<div class="role" [class.selected]="selected" (click)="clicked()">
<btn #icon
[sources]="images"></btn>
</div>
role-item.dart
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.png',
'../images/roles/$role-h.png',
'../images/roles/$role-c.png'
];
}
@Input() String title;
@Input() String desc;
@ViewChild('icon')
ButtonComp icon;
String itemRole;
List<String> images;
bool isSelected = false;
bool toggle = false;
RoleItem(this._placeService, this._router, this._environment);
void clicked() {
bool newlySelected;
if (!isSelected)
newlySelected = true;
if (toggle)
selected = !selected;
else
selected = true;
pressAction.emit(role);
if (newlySelected)
select.emit(role);
}
bool get selected => isSelected;
void set selected(bool isSelected) {
this.isSelected = isSelected;
icon.select(isSelected);
}
}
答案 0 :(得分:5)
您需要添加
@Output() EventEmitter<String> selectedChange = new EventEmitter<String>();
到您的RoleChooser
组件。
通知有关变更的电话
selectedChange.add('foo');
然后来自
的userRole.roleName
<role-chooser-comp [(selected)]="userRole.roleName"></role-chooser-comp>
将会更新。