Не знаете, почему данные не передаются правильно от дочернего к родительскому компоненту в Angular 4

У меня есть два компонента, и я хотел бы передать данные из «дочернего» компонента, который происходит, когда пользователь щелкает изображение внутри этого компонента.

У меня есть два компонента (публикация и gifpicker - дочерний компонент)

Функция 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,
  ) {}
}

-- 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>

javascript angular components angular4-forms
person Zabs    schedule 04.10.2018    source источник
comment
Не могли бы вы переформатировать свой вопрос и объяснить, какой из них является родительским компонентом, а какой дочерним? Лично у меня проблема с пониманием второго абзаца с автозаполнением на картинке.   -  person Husein Roncevic    schedule 04.10.2018
comment
извините @HuseinRoncevic, я внес изменения, надеюсь, это яснее   -  person Zabs    schedule 04.10.2018
comment
Если вы хотите передать данные родителю, вам нужно использовать $event или двустороннюю привязку данных.   -  person NoHoney_k1ll    schedule 04.10.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вы пытались использовать @Output() для передачи информации от дочернего к родительскому после завершения метода applyGif().

В своем GifPickerComponent объявите:

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

Как только GIF выбран в applyGif()

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);
}

В файле HTML-шаблона PostingComponent, где вы используете app-gifpicker:

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

Создайте onGifSelected в файле posting.component.ts и обработайте результат:

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

Кроме того, ваш компонент публикации является родительским, и в нем размещаются другие компоненты, такие как ваш GIFPickerComponent, поэтому нет необходимости предоставлять услугу в обоих компонентах. Достаточно сделать это в родительском компоненте, и он будет передан дочернему компоненту. Другими словами, будет передан один и тот же экземпляр. С вашей текущей договоренностью и родитель, и дочерний объект имеют два разных экземпляра службы.

person Husein Roncevic    schedule 04.10.2018
comment
отлично - теперь это имеет для меня смысл - спасибо, Хусейн - person Zabs; 04.10.2018