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

Question

当您在输入字段中输入内容然后enter press时，您能否建议如何在列表中添加项目。但这是不同的组件。我想使用@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>

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

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

请参阅以下代码： http ://plnkr.co/edit/mQtQIXIJwMfJSfNVHvac?p=preview。