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。更具体地说，我有一个处理click事件的方法，需要将click事件委托给它的孩子。哪种方法最好？

Answer 1

我会将ComponentOne注入ComponentTwo并在ComponentTwo的构造函数中将ComponentTwo分配给ComponentOne。

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

你也可以创建一个只做那个的指令，以避免ComponentTwo与ComponentOne的紧密耦合。

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

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

您必须将visibility ComponentOne设置为儿童。

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

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

Answer 2

您的问题的答案位于本教程页面：https://angular.io/docs/dart/latest/tutorial/toh-pt3.html

实际上，您可以使用组件中的@Input parent指令以抽象方式将其链接到其父级，并使用“target attribute property”[parent] = me

因此，您可以声明您希望父级实现的接口具有单向链接

如何在AngularDart中引用其父组件

2 个答案: