события не пузырь родительского компонента

Question

У меня есть следующая структура проекта:

todo-form пожары created событий, и я хочу, чтобы обработать это событие в todos компоненты

ToDo-форме. component.html:

<form class="todo-form" (ngSubmit)="create();" #todoForm="ngForm"> 
     <input name="title" [(ngModel)]="newTodoTitle" type="text" placeholder="Что нужно сделать?" required/> 
     <button [disabled]="todoForm.form.invalid" type="submit">Добавить</button> 
    </form> 

метод create исполняет (я увидеть его в отладчик )
ToDo-form.component.ts:

import {Component, Output, EventEmitter} from "@angular/core"; 
.... 
@Component({ 
    .... 
    selector: "todo-form", 
    ... 
}) 
export class TodoFormComponent { 

     @Output() created = new EventEmitter<Todo>(); 
     ... 
     create():void { 
      if (this.newTodoTitle) { 
       this.created.emit(new Todo(this.newTodoTitle)); 
      } 
     } 
     ... 
} 

todos.component.html:

<todo-form (created)="onToDoCreated($event)"></todo-form> 
... 

todos.component .:

@Component({ 
    moduleId: module.id, 
    selector: "todos", 
    templateUrl: "todos.component.html", 
    styleUrls: ["todos.component.css"] 
}) 
export class TodosComponent implements OnInit { 
    ... 
    onTodoCreated(todo:ITodo):void { 
     this.todoService.addTodo(todo).then(todo=>this.addToCache(todo)); 
    } 
} 

главная:

import {BrowserModule} from "@angular/platform-browser"; 
import {NgModule} from "@angular/core"; 
import {FormsModule} from "@angular/forms"; 
import {HttpModule} from "@angular/http"; 
import {AppComponent} from "./app.component" 
import {TodoListComponent} from "./components/todos/todo-list/todo-list.component"; 
import {TodoListItemComponent} from "./components/todos/todo-list-item/todo-list-item.component"; 
import {TodoFormComponent} from "./components/todos/todo-form/todo-form.component"; 
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api'; 
import { TodoSeedData } from './components/shared/todo.data'; 
import { TodosComponent } from "./components/todos/todos.component"; 


@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     InMemoryWebApiModule.forRoot(TodoSeedData) 
    ], 
    declarations: [AppComponent, TodoListComponent, TodoListItemComponent, TodoFormComponent, TodosComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

метод onTodoCreated не вызывает. Также обновляется страница, а от меня не ожидается. Что я пропустил?

Answer 1

После траты времени на расследование я понял, что проблема была в опечатке.

в HTML:

onToDoCreated 

в ц:

onTodoCreated 

Answer 2

В то время как ваша опечатка исправлена ​​проблема, ваш код не использует событие пузыриться. Вы по-прежнему обрабатываете событие на уровне компонента <todo-form>. Для тестирования барботажа на родительском уровне попробуйте это:

<div (created)="onToDoCreated($event)"> 
    <todo-form></todo-form> 
</div> 

Дива не получит созданное событие. Банкротство событий должно обрабатываться с использованием собственных событий dom.