Question

我试图检测子组件中的点击。在它的兄弟组件中，我想清空其中的输入字段。让我向您展示一个我的意思的简短例子：

// Parent component template:
<div>
  <child1-comp></child1-comp>
  <child2-comp></child2-comp>
</div>

// child1-comp template:
<input type="text" #inputText (keyup)="0">

// child2-comp template:
<ul>
  <li (click)="onClick(text1.value)" #text1>Test</li>
  <li (click)="onClick(text2.value)" #text2>Test2</li>
</ul>

在child2-comp中的其中一个点击事件后，我想清空child1-comp中输入字段中的值。

这可以在Angular 2中完成吗？

Answer 1

通过服务组件与组件进行通信

当组件不在父子关系中时，只需创建和服务使它们相互通信，创建服务后，您可以使用订阅者呼叫或重新路由呼叫。

if(_p1.count("1"))

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 2

我建议如下：

// Parent component template:
<div>
  <child1-comp [(value)]="value"></child1-comp>
  <child2-comp (click)="value=''"></child2-comp>
</div>

// child1-comp template:
<input type="text" [(ngModel)]="value" (keyup)="0">

// child2-comp template:
<ul>
  <li (click)="click.emit(text1.value)" #text1>Test</li>
  <li (click)="click.emit(text2.value)" #text2>Test2</li>
</ul>

在单击事件上，更改兄弟组件中的输入字段

2 个答案: