如何用飞镖角编写双向绑定

Question

我需要一个组件来选择具有双向绑定的用户角色

角色选择器-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>

它的类如下：

role-chooser-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（实现自定义表单控件（使用 ngModel））

我想在飞镖中做同样的事情，但我不知道如何......

角色项现在很简单，我只是粘贴它以供参考：

角色-item.html

<div class="role" [class.selected]="selected" (click)="clicked()">
      <btn #icon
          [sources]="images"></btn>
    </div>

角色项目.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);
  }

}

Answer 1

你需要添加

@Output() EventEmitter<String> selectedChange = new EventEmitter<String>();

到您的RoleChooser 组件。

通知更改调用

selectedChange.add('foo');

然后userRole.roleName来自

<role-chooser-comp [(selected)]="userRole.roleName"></role-chooser-comp>

将会更新。