dart - 如何在 AngularDart 中从其父组件引用子组件

Question

我有两个组件:ComponentOne和 ComponentTwo .

@NgComponent(...)
class ComponentOne {
}

<div>
  <h1>Component One</h2>
  <content></content>
<div>

@NgComponent(...)
class ComponentTwo {
}

<div>
  <h1>Component Two</h2>
<div>

然后我有以下标记:

<component-one>
  <component-two></component-two>
</component-one>

如何引用 ComponentTwo来自 ComponentOne .更具体地说，我有一个处理点击事件的方法，需要将该点击事件委托(delegate)给它的 child 。最好的方法是什么？

Answer 1

我会注入(inject) ComponentOne至ComponentTwo在 ComponentTwo 的构造函数中分配 ComponentTwo至ComponentOne .

 ComponentTwo(ComponentOne c1) {
   c1.componentTwo = this;
 }

您还可以创建一个仅执行此操作的指令，以避免 ComponentTwo 与 ComponentOne 的紧密耦合。

AssignComponentTwoDirective(ComponentOne c1, ComponentTwo c2) {
  c1.componentTwo = c2;
}

也许有更好的方法，但我还没有看到。

您必须设置 visibility的 ComponentOne给 child 。

@NgComponent(
  selector: 'component-one',
  visibility: NgDirective.CHILDREN_VISIBILITY,
  ...)
class ComponentOne ...

另见 angular 2 / typescript : get hold of an element in the template