Question

我这里有一个傻瓜 - https://plnkr.co/edit/QFB5eNQlRlXe7myrPsIs?p=preview

我知道这是一个愚蠢的例子，但我只想尝试使用（点击）和@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

如果你正在使用Output装饰器，你需要做两件事：

用它装饰的属性，来自“@ angular / core”包的EventEmitter。
一种告诉输出发出值的方法。

对于简单点击事件的示例，您将执行以下操作：

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

Answer 3

尝试一下...

child.component.html 文件

<button class="btn btn-success" (click)="addCount();">add Count</button>

child.component.ts 文件

@Output() myCountEmit = new EventEmitter(); // output Emitter variable
count: Number = 0;

// emit function
addCount(){
this.count++;
myCountEmit.emit({'count': this.count , 'component' : 'child component'});
}

Parent.component.html 文件

   <app-child (myCountEmit)='clickEvent($event)'></app-child>

Parent.component.ts 文件

clickEvent(value) {
    console.log(value); // output emit result
  }

Angular 2 @Output with（click）

3 个答案: