时间戳

首页 > 解决方案 > 子组件不向父组件发出输出

angular - 子组件不向父组件发出输出

问题描述

我已经看到了与我的完全相似的问题，甚至我的应用程序在这个stackblitz中运行良好，但在我的本地项目中，它包含我的组件和模块，对于我的生活，我不知道为什么。

背景：

我决定添加 Login with Google，这可以从项目的两个部分进行。由于在域和其他方面应用了某种逻辑，因此我决定使用简单的 Open with Google Button 创建一个单独的子组件。

我成功地从谷歌获取数据，但无法发送回父组件。摆脱谷歌的概念，我什至不能发出正常值，就像你在闪电战中看到的那样。

子组件不向父组件发出输出的原因可能是什么？我在 Angular 7 中，这很重要。我的代码是：

google.component.ts

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

@Component({
  selector: "app-google-login",
  template: `<button type="button" (click)="process()">
    Act
  </button>`
})
export class GoogleLoginComponent implements OnInit {
  @Output() userDetails = new EventEmitter<any>(); 

  constructor() {}

  process(): void {
    /*
    emit data here
    */
    this.userDetails.emit('Done')
  }

  ngOnInit() {}
}

App.component.html

<app-google-login
  (userDetails)="emittedGoogleUserInformation($event)"
></app-google-login>

app.component.ts

emittedGoogleUserInformation(info){
  console.log('google data from child component ', info);
}

标签： angular

解决方案

你可以试试这个：

@Output() userDetails: EventEmitter<any> = new EventEmitter<any>();

推荐阅读