如何在AngularDart中从其父级引用子组件 [英] How to reference child component from its parent in AngularDart

问题描述

我有两个组件： ComponentOne 和 ComponentTwo 。

类别ComponentOne {
}
$ {
























$ b< div>
< h1>组件一< / h2>
< content>< / content>
< div>

@NgComponent（...）
class ComponentTwo {
}

< div>
< h1>组件二< / h2>
< div>

然后我有以下标记：

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

如何引用 ComponentTwo c $ c> ComponentOne 。更具体地说，我有一个方法来处理点击事件，需要将该点击事件委托给它的孩子。

解决方案

我会注入 ComponentOne 到 ComponentTwo 和 ComponentTwo的构造函数分配 ComponentTwo 到 ComponentOne 。

  ComponentTwo（ComponentOne c1）{
 c1.componentTwo = this; 
} 
  

您也可以创建一个只有这样的指令，以避免紧耦合ComponentTwo到ComponentOne。

  AssignComponentTwoDirective（ComponentOne c1，ComponentTwo c2）{
 c1。 componentTwo = c2; 
} 
  

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

您必须为儿童设置 ComponentOne 的 visibility

  @NgComponent（
 selector：'component-one'，
可见性：NgDirective.CHILDREN_VISIBILITY，
 ...）
 class ComponentOne ... 
  

另请参见 angular 2 / typescript：获取模板中的元素

I have two components: ComponentOne and ComponentTwo.

@NgComponent(...)
class ComponentOne {
}

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

@NgComponent(...)
class ComponentTwo {
}

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

Then I have the following markup:

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

How do I reference ComponentTwo from ComponentOne. To be more specific, I have a method which handles click event and needs to delegate that click event to it's child. Which is the best way to do that?

解决方案

I would inject ComponentOne to ComponentTwo and in the constructor of ComponentTwo assign ComponentTwo to ComponentOne.

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

You could also create a Directive that does only that, to avoid tight coupling of ComponentTwo to ComponentOne.

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

Maybe there is a better way but I didn't see one yet.

You have to set visibility of ComponentOne to children.

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

See also angular 2 / typescript : get hold of an element in the template

这篇关于如何在AngularDart中从其父级引用子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！