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'。

我已经尝试过使用emit，broadcast播放。我知道广播气泡向下到叶子节点并向上发出气泡。我也试过usind“scope.createChild（）”但我觉得我错过了什么。

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

当我理解文档时，我必须在子组件中使用emit（）而不是parentNode.broadcast（），但我无法使其工作

Answer 1

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

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

实现所需行为的最简单方法是将ParentComponent直接注入ChildComponent。父组件可以注入其轻型和阴影DOM中的组件。

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

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

角镖子组件范围

1 个答案: