javascript - 如何使用事件发射器在两个组件之间共享数据？

Question

您能否建议当输入字段中输入内容然后 enter 时如何在列表中添加项目？但这些是不同的组件。我想使用 @Input 、@Output 、EventEmitter 将输入字段值共享给不同的组件。

我制作一个组件。 <todo></todo >

这是 ts 文件

import { Page,NavController,Modal } from 'ionic-angular/index';
import { Component, Input, Output, EventEmitter} from 'angular2/core';



@Component({
  selector:'todo'
  templateUrl:"addtodo.html",
})
export class AddToDO{

constructor() {

    }
    addItem(v){
     alert(v.value)
    }
}

这是我的 html

<label class="item item-input">
<span class="input-label" >Add Todo</span>
  <input type="text" #todo placeholder="Add todo" (keyup.enter)="addItem(todo)">
</label>

我想在按下回车键时添加项目列表。因此需要在组件之间共享数据

http://plnkr.co/edit/N6aXDZXUr99MC6w77H6d?p=preview

Answer 1

我将利用 AddToDO 组件中的 @Output 来触发添加元素。所以你可以从父组件中捕获它并在列表中添加相应的数据。

@Component({
  selector:'todo'
  templateUrl:"addtodo.html",
})
export class AddToDO{
  @Output()
  todoAdded:EventEmitter = new EventEmitter();

  constructor() {

  }

  addItem(v){
    alert(v.value)
    this.todoAdded.emit(v);
  }
}

在父组件模板中:

<todo (todoAdded)="addTodoInList($event)"></todo>

以下是addTodoInList方法的内容:

addTodoInList(todo) {
  this.Todo.push(todo);
}

查看这个plunkr:http://plnkr.co/edit/mQtQIXIJwMfJSfNVHvac?p=preview .