角度2 @output（クリック）

Question

私はここにplunker持っている - https://plnkr.co/edit/QFB5eNQlRlXe7myrPsIs?p=preview

を、私はこれは愚かな例である知っているが、私はちょうど働いて使用する例（クリック）し、@outputを取得しようとしています。

私は、2つのボタンで数字を増減させ、もう1つのボタンで親コンポーネントの現在の数字を出力します。

私は知っているが、あなたは二つのことを必要とするOutputデコレータ使用している場合は、単に@output

import {Component} from '@angular/core' 

@Component({ 
    selector: 'app', 
    templateUrl: './src/app.component.html' 
}) 

export class AppComponent { 

    myCount: number = 5 

    newCount: number 

    constructor() { 

    } 

    countChanges(event) { 
    this.myCount = event; 
    } 

    handleEventClicked(data){ 
    this.newCount = data 
    } 

} 

Answer 1

を学ぶためのシンプルなものを望んでいた愚かな例：

1. にそれで飾らプロパティを、 '@ angular/core'パッケージのEventEmitterです。
2. 出力に値を出力するように指示するメソッド。ご例えば

あなたが次のことを行うと、単純なクリックイベントで：

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

@Component({ 
    selector: 'my-example', 
    ... 
}) 
export class MyExampleComponent { 
    @Output() 
    public myOutput = new EventEmitter<MouseEvent>(); 

    public handleClick(event: MouseEvent) { 
     this.onClick$.emit(event); 
    } 
} 

とテンプレートで：

<div (click)="handleClick($event)">click me</div> 

親コンポーネントから、あなたにハンドラをバインドすることができます新しく作成された出力：

<my-example (myOutput)="parentHandleClick($event)"></my-example> 

好きなイベントデータをEventEmitterに送信し、後で親の$event経由で取得します。ここで

Answer 2

はあなただけhandleEventClicked

https://plnkr.co/edit/GzEbtSg103eXVv03WSm4?p=preview

を変更する必要は実施例であります