如何使用事件發射器在兩個組件之間共享數據？

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。