Angular dart 子组件范围

Question

如何将组件事件限制为它的父/子组件并防止冒泡。

我有以下两个组件：

ParentComponent.dart

@Component(
  selector: "parent-component",
  template: '<div>parent value: {{value}}<content></content></div>',
  useShadowDom: false
)
class ParentComponent implements ScopeAware{
  Scope _scope;

  @NgAttr('value')
  String value;

  void set scope(Scope scope){
    _scope = scope;
    _scope.on('select-child').listen((ScopeEvent event){
      value = event.data['value'];
    });
  }
}

ChildComponent.dart

@Component(
  selector: "child-component",
  template: '<div ng-click="select()">child: {{value}}</div>',
  useShadowDom: false
)
class ChildComponent implements ScopeAware{
  Scope _scope;

  @NgAttr('value')
  String value;

  void select(){
    _scope.parentScope.broadcast('select-child', {
      'value': value
    });
  }

  void set scope(Scope scope){
    _scope = scope;
  }
}

当单击子组件时，父组件会更新其值。

但是当我有更多的父组件时，它们都会听相同的子组件：

<!-- Parent 1 -->
<parent-component>
  <child-component value="foo"></child-component>
  <child-component value="bar"></child-component>
</parent-component>

<!-- Parent 2 -->
<parent-component>
  <child-component value="herp"></child-component>
  <child-component value="derp"></child-component>
</parent-component>

当我单击 parent1 的 foo 子组件时，两个父组件都将其值更改为 'foo'。

我已经尝试过使用发射、广播。我知道向下广播气泡到叶节点并向上发射气泡。我也尝试过使用“scope.createChild()”，但我想我错过了一些东西。

如何在父级中创建仅对子级可见的范围，反之亦然？ 或者如何正确使用广播发射？

当我正确理解文档时，我必须在子组件中使用 emit() 而不是 parentNode.broadcast() 但我无法让它工作

Answer 1

好问题。您的困惑来自这样一个事实，即虽然组件确实创建了新范围，但这些范围仅适用于 shadowDom（模板中的 html：注释）。

在您的示例中，所有 6 个组件 - 2 个父级和 4 个子级，创建作为根范围的子范围的范围。因此，当您调用 parentScope.broadcast 时，您将触发从 rootScope 到所有 6 个作用域的事件。

实现你想要的行为的最简单方法是直接将 ParentComponent 注入 ChildComponent。父组件可以注入到它们的 light 和 shadow DOM 中的组件。

class ChildComponent implements ScopeAware {
  ParentComponent _p;    
  ChildComponent(this._p);
  void select(){
    _p.setValue(value);
  }
  ...
}

唯一的缺点是这使得这两个组件彼此更紧密地耦合，如果您为自己的应用程序创作这两个组件，这没关系。