为什么EventEmitter对象不发出指定的实例？

Question

我在Angular2中有这两个组件，还有checklist选择器的模板。

首先，这是两个组成部分：

import {Component, EventEmitter} from '@angular/core';

export class ToDoItem{
    toDo: string;
    checked: boolean;

    constructor(toDo:string, checked: boolean){
        this.toDo = toDo;
        this.checked = checked;
    }
}

@Component({
    selector: 'to-do',
    inputs: ['toDoItem'],
    outputs: ['onToDoItemSelected'],
    styleUrls: ['./app.checklist.css'],
    template: `
        <input type="checkbox"><label class="strikethrough">{{toDoItem.toDo}}</label><button (click)="itemClicked()">Delete</button>
        `
})
export class ToDoItemComponent{
    toDoItem : ToDoItem;

    onToDoItemSelected: EventEmitter<ToDoItem>;

    constructor(){
        this.onToDoItemSelected = new EventEmitter();
    }

    itemClicked() : void {
        console.log(this.toDoItem);
        this.onToDoItemSelected.emit(this.toDoItem);
    }
}

@Component({
    selector: 'checklist',
    templateUrl: './app.checklist.html'
})
export class CheckList{
    toDoItems: Array<ToDoItem>;

    constructor(){
        this.toDoItems = [];
    }

    createToDo(description: string) : void {
        if (description !== ""){
            this.toDoItems.push(new ToDoItem(description, false));
        }
    }

    removeToDoItem(toDoItem: ToDoItem) : void {
        console.log(toDoItem);
        var indice = this.toDoItems.indexOf(toDoItem);
        this.toDoItems.splice(indice, 1);
    }
}

这是CheckList类的模板文件：

<h2>A Checklist</h2>
<span *ngIf="toDoItems.length == 0">
    There are not tasks yet...
</span>
<ul>
    <li *ngFor="let toDoItem of toDoItems">
        <to-do [toDoItem]="toDoItem" (itemClicked)="removeToDoItem(toDoItem)"></to-do>
    </li>
</ul>

<hr>

<input type="text" placeholder="Enter the description..." #toDoDescription>
<button (click)="createToDo(toDoDescription.value); toDoDescription.value = '' ">Add</button>

基本上，问题在于它不会删除项目： EventEmitter不会隐式调用removeToDoItem 。

一些建议，想法，..来解决吗？

Answer 1

您的导入文件错误。 为此，您应该像这样使用EventEmitter。

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
    selector: 'rio-counter',
    templateUrl: 'app/counter.component.html'
})
export class CounterComponent {
    @Input()  count = 0;
    @Output() result = new EventEmitter<number>();

    increment() {
        this.count++;
        this.result.emit(this.count);
    }
}

子类html

<div>
    <p>Count: {{ count }}</p>
    <button (click)="increment()">Increment</button>
</div>

父组件应该是这样的。

import { Component, OnChanges } from '@angular/core';

@Component({
    selector: 'rio-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent implements OnChanges {
    num = 0;
    parentCount = 0;

    ngOnChanges(val: number) {
    this.parentCount = val;
  }
}

父HTML部分

<div>
    Parent Num: {{ num }}<br />
    Parent Count: {{ parentCount }}
    <rio-counter [count]="num" (result)="ngOnChanges($event)">
    </rio-counter>
</div>

示例来自rangle.io注释。 现在使用@Output（）onToDoItemSelected并导入Output并在父组件调用中（onToDoItemSelected）=“ removeToDoItem（$ event）”。 我希望这个能帮上忙

Answer 2

我认为这是因为您没有为removeToDoItem提供正确的参数。 在您的CheckList模板中，您具有：

(itemClicked)="removeToDoItem(toDoItem)"

使用EventEmitter ，您emit的参数实际上是$event数据，就像(click) 。 因此，您的代码应为：

(itemClicked)="removeToDoItem($event)"

这应该传递正确的数据给removeToDoItem的CheckList ，没有任何其他的变化。

Answer 3

没有事件或@Output() itemClicked ，因此(itemClicked)="removeToDoItem(toDoItem)"不会导致removeToDoItem() 。

也许你是说

(click)="itemClicked(toDoItem)