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

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

函数 applyGif()

注意-组件有一些不需要的代码在这篇文章中从视图中删除,以获得额外的清晰度。

下面的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,
  ) {}
}

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>