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

Question

你能建议当输入字段中输入内容时如何在列表中添加项目然后 enter press.But 这些是不同的组件。我想使用 @ 将输入字段值共享到不同的组件输入，@输出，事件发射器。

我做了一个组件。 <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);
}

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

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

how to share data between two component using Event Emitter?

javascript

ionic2

angular2-routing

angular