角度无法接收发射值

Question

我正在尝试将价值从DropdownComponent传递到TaskComponent：

DropdownComponent位于NavBbrComponent（AppModule）的内部，而TaskComponent位于MainComponent所属的HomeModule中。

在DropdownComponent中有select的定义：

<select class="form-control minimal" id="project" name="project" [(ngModel)]="selectedProject" (change)="onChange($event.target.value)">
  <option>Project 1</option>
  <option>Project 2</option>
</select>

使用onChange方法发出值：

onChange(event) {
    this.toTask.emit(event);
  }

值绑定在“主要组件”中，“主要组件”是“任务”组件的定义

<app-task (toTask)="fromDropdown($event)"></app-task> 

但TaskComponent中没有值。

Stackblitz

Answer 1

您的方法完全错误。 Angular中的事件无法通过不包含它们的组件中的Output访问，我的意思是这个

<app-task (toTask)="fromDropdown($event)"></app-task>

意味着您在应用任务组件中有toTask个事件，您可以在main-component中访问它。

在具有这种关系的组件之间传输数据的正确方法是创建服务，并在navbar组件中向服务发出值，然后在任务组件中监听它们。您需要使用Subject来解决该问题。这里有很多答案。

Answer 2

由于您的DropdownComponent和TaskComponent组件没有任何父子关系，因此您必须使用某种服务在这些组件之间传递数据。

我刚刚更新了您的 DEMO ，在那里您可以找到解决方案。

SAMPLE DEMO