angular 无法接收发射值

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);
  }

值绑定在 Main Component 中，其中是 Task 组件的定义

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

但 TaskComponent 中没有值。

Stackblitz

Answer 1

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

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

表示您在应用程序任务组件中有 toTask 事件，您可以在 main-component.

中访问它

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

Answer 2

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

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

SAMPLE DEMO

angular 无法接收发射值

angular cannot receive emitted value

select

angular-components

angular

angular-event-emitter