不确定为什么数据在 Angular 4 中不能从子组件正确传递到父组件

Question

我有两个组件，我想传递来自 'child' 组件的数据，当用户从该组件中单击图像时发生的数据。

我有两个组件（posting 和 gifpicker - 子组件）

函数 applyGif() 是我用来传递数据的子组件中的函数 - 我想将此数据传递给父组件。

注意 - 为了更加清楚起见，这些组件有一些不需要的代码在此 post 中从视图中删除。

由于某种原因，下面的 HTML 组件目前在视图 selectedGif 中没有显示

-- 发布组件（父组件）--

/** long list of imports here **/
@Component({
selector: 'app-posting',
templateUrl: './posting.component.html',
styleUrls: ['./posting.component.scss'],
providers: [ GifpickerService ],
})
export class PostingComponent implements OnInit{

  public selectedGif: any = '';
  @ViewChild(GifpickerComponent) gifpicker: GifpickerComponent;

  ngOnInit(): void {

  }

  constructor(@Inject(DOCUMENT) private document: any,
      public gifpickerService: GifpickerService,
  ) {}
}

-- GifPickerComponent（子组件）--

import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {GifpickerService} from "./gifpicker.service";

@Component({
  selector: 'app-gifpicker',
  templateUrl: './gifpicker.component.html',
  styleUrls: ['./gifpicker.component.scss'],
  providers: [ GifpickerService ],
})
export class GifpickerComponent implements OnInit {
  public selectedGif: any = {};

 constructor(private gifpickerService: GifpickerService) {}

 ngOnInit() {

 }

  applyGif(gif): any {
    // this is an json object I want to use/see in the Posting HTML Component 
    let gifMedia = gif.media[0]; 
  }
}

-- 发布组件 HTML（需要来自此处显示的 gifPickerComponent applyGif() 的数据 --

<div>{{ selectedGif }}</div>

Answer 1

您是否尝试过在 applyGif() 方法结束后使用 @Output() 将信息从 child 传递到 parent。

在您的 GifPickerComponent 声明中：

@Output() gifSelected: EventEmitter<any> = new EventEmitter<any>(); // or whatever type your are sending

在 applyGif()

中选择 GIF 后

applyGif(gif): any {
    this.gifPickerVisible = false;
    this.uploadedGif = true;
    let gifMedia = gif.media[0]; // this is an json object I want to use/see in the Posting HTML Component 
    this.gifSelected.emit(gifMedia);
}

在您使用的 PostingComponent HTML 模板文件中 app-gifpicker:

<app-gifpicker (gifSelected)="onGifSelected($event)"></app-gifpicker>

在您的 posting.component.ts 文件中创建 onGifSelected 并处理结果：

public onGifSelected(gif: any) {
    // Do whatever you need to do.
    this.selectedGif = gif;
}

此外，您的发布组件是 parent 并且它托管其他组件，例如您的 GIFPickerComponent，无需在两个组件中提供服务。在 parent 中完成它就足够了，它将被传递到 child 组件。换句话说，将传递相同的实例。根据您当前的安排，parent 和 child 都有两个不同的服务实例。

不确定为什么数据在 Angular 4 中不能从子组件正确传递到父组件

Unsure why data isn't passing correctly from child to parent component in Angular 4

javascript

components

angular

angular4-forms