Question

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

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

这里是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

我会利用log(x) = k*log2 + p(f) log2(x) = k + p(f)*invlog2组件中的@Output来触发添加元素。因此，您可以从父组件中捕获它，并在列表中添加相应的数据。

AddToDO

并在父组件模板中：

@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

请参阅此plunkr：http://plnkr.co/edit/mQtQIXIJwMfJSfNVHvac?p=preview。

如何使用Event Emitter在两个组件之间共享数据？

1 个答案: