事件不会冒泡到父组件答案

【问题标题】：Event doesn't bubble to parent component事件不会冒泡到父组件
【发布时间】：2017-05-02 05:44:08
【问题描述】：

我的项目结构如下：

todo-form 触发 created 事件，我想在 todos 组件中处理此事件

todo-form.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.ts：

@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 不会调用。 页面也会刷新，虽然这不是我所期望的。我错过了什么？

【问题讨论】：

@echonax 你是什么意思？父项中的导入语句？
从“./todo-form/todo-form.component”导入{TodoFormComponent}；
我的意思是您的@NgModule 中定义的两个组件。老实说，我找不到任何错误，这是@Output 的使用示例：plnkr.co/edit/MeQbC7Jbc8rprMF66aEF?p=preview 也许会有所帮助
@echonax 我在兄弟组件中有 2 个工作示例，但找不到差异。
@echonax 文件内容包含 NgModule 添加

标签： javascript angular event-handling eventemitter

【解决方案1】：

在浪费时间进行调查后，我了解到问题是错字。

在 html 中：

onToDoCreated

在ts中：

onTodoCreated

【讨论】：

【解决方案2】：

虽然您的拼写错误解决了问题，但您的代码并未使用事件冒泡。您仍在处理 <todo-form> 组件级别的事件。要在父级别测试冒泡，请尝试以下操作：

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

div 不会获取 created 事件。事件冒泡必须使用原生 dom 事件来处理。

【讨论】：