Question

我正在构建一个包含角色的组件。这是组件源代码

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>

它由多个项目组成的 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>

现在我希望能够取消选择除按下的项目之外的所有项目。为此，我在每个项目中都有一个选择@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();
}

如何在Angular dart中调用子组件上的方法？

1 个答案: