Question

能帮我解决这个问题吗？在从子级发送输出事件并在父级侦听它时，我正在获取事件对象而不是值。

这是我的代码

app.component.ts

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

  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'Hello Umashankar';
     /**
   * We can pass this dat to child component using Input 
    */
   post={
       title:"Angular Practice",
       isFavorite:false
    }
   onisFavoriteChange(isFavorite){
    console.log(isFavorite)
   }
  }

app.component.html

     <h1>Courses Application</h1>

     <app-favorite [isFavorite]="post.isFavorite" (click)="onisFavoriteChange($event,value)"></app-favorite>

favorite.component.ts

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

@Component({
  selector: 'app-favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {

   @Input('isFavorite') isFavorite:boolean;

   @Output() change = new EventEmitter();

   constructor() { }


   setResetFavorite(){
     this.isFavorite =!this.isFavorite;
     this.change.emit(this.isFavorite);
   }

 }

Answer 1

使用输出装饰器名称作为事件名称”

输出装饰器名称应与输出属性绑定匹配

 @Output() data = new EventEmitter();

<app-favorite [isFavorite]="post.isFavorite" (data)="onisFavoriteChange($event)"></app-favorite>

HTML

  <app-favorite [isFavorite]="post.isFavorite" (change)="onisFavoriteChange($event)"></app-favorite>

TS

onisFavoriteChange(e){
    console.log(e)
   }

示例：https://stackblitz.com/edit/angular-yuvgdt

Answer 2

将click的{{1}}替换为change，如下所示：代替

app.component.html

使用

(click)="onisFavoriteChange($event,value)

在@Output事件Angular 6中获取事件对象代替值

2 个答案: