javascript - 不确定为什么 Angular 4 中的数据无法从子组件正确传递到父组件

Question

我有两个组件，并且希望从“子”组件传递数据，当用户单击该组件中的图像时，就会发生这种情况。

我有两个组件(发布和 gifpicker - 子组件)

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

注意 - 为了更加清晰起见，组件中的一些此方面不需要的代码已从本文中删除。

由于 View 中的某种原因，下面的 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() 将信息从子级传递给父级。

在您的 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);
}

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

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

在 posts.component.ts 文件中创建 onGifSelected 并处理结果:

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

此外，您的发布组件是父组件，它托管其他组件，例如您的 GIFPickerComponent，无需在两个组件中都提供服务。在父组件中执行此操作就足够了，并且它将传递给子组件。换句话说，将传递同一个实例。根据您当前的安排，父级和子级都有两个不同的服务实例。