Question

我试图在AngularDart中创建一个radiobutton组件。

所以它将按如下方式使用：

<radio_component currentIndex="0" selectedIndexZ="{{cmp.selectedIndexZ}}" 
  textLabel="Label A"></radio_component>

<radio_component currentIndex="1" selectedIndexZ="{{cmp.selectedIndexZ}}" 
  textLabel="Label B"></radio_component>

如果有人点击其中一个单选按钮组件，我希望其他单选按钮组件更改其状态以更改CSS类。当有人点击它时，我在其中一个内部更改了selectedIndexZ，它没有更新其他的。

class RadioComponent extends AttachAware with ShadowRootAware {

  @NgTwoWay('currentIndex')
  int currentIndex = 0;

  @NgTwoWay("selectedIndexZ")
  String selectedIndexZ = "0";

如果有人点击一个单选按钮组件，它怎么能导致其他人更新？

由于我没有时间，即我现在必须让它完全正常工作，我只是复制了这个方法，这有效Creating an Angular.Dart Cube component with 6 template arguments

如果我将来有空闲时间，我会回到这个问题。

Answer 1

您需要在祖先元素上使用控制器并将两个元素的selectedIndexZ绑定到此控制器（将来只有一个根控制器）

您还可以将这两个元素嵌入另一个组件（隐式地是控制器）并绑定到该组件的字段。

@Component(selector: 'parent-element', publishAs: 'par', template: ...)
class ParentComponent {

  @NgTwoWay("selectedIndexZ")
  String selectedIndexZ = "0";

}

<强>模板

<parent-element>
  <radio_component currentIndex="0" selectedIndexZ="{{par.selectedIndexZ}}" 
    textLabel="Label A"></radio_component>

  <radio_component currentIndex="1" selectedIndexZ="{{par.selectedIndexZ}}" 
    textLabel="Label B"></radio_component>
</parent-element>

试图在Angular Dart中制作单选按钮组件，如何共享状态？

1 个答案: