Как передать функцию подписки родительскому компоненту? (Angular)

Question

Как я могу передать функцию подписки, где я получаю информацию от API REST от дочернего компонента (shares.component) к родительскому компоненту (home.component), и вызываю ее в дочернем компоненте с источником событий в ngOnInit (),Буду признателен за любую помощь.Я приложил код.

ДЕТСКИЙ КОМПОНЕНТ Соглашения.component

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

@Component({
  selector: 'app-agreements',
  templateUrl: './agreements.component.html',
  styleUrls: ['./agreements.component.sass']
})
export class AgreementsComponent implements OnInit {
  @Output() getBody = new EventEmitter<any>();
  private body;
  constructor() { }

  ngOnInit() {
    this.body=this.getBody.emit();
  }

}

<ul>
  <li *ngFor="let b of body">{{b.body}}</li>
</ul>

СЕРВИС

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AgreementsService {

  constructor(private http:HttpClient) { }

 // Uses http.get() to load data from a single API endpoint
 getBodyService(): Observable<any> {
  return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
}

РОДИТЕЛЬСКИЙ КОМПОНЕНТ (home.component)

import { Component, OnInit } from '@angular/core';
//import {Customer} from '../model/model';
import {AgreementsService} from '../home/agreements/agreements.service';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {
  private body;
  constructor(private _agreementsService: AgreementsService) { }

  ngOnInit() {
  }

  getBody() {
    return this._agreementsService.getBodyService().subscribe(
        data => { this.body = data, console.log(data)},
        err => console.error(err),
        () => console.log('done loading foods')
      )
    }

}

<app-email></app-email>
<app-agreements (getBody)="getBody($event)"></app-agreements>

Answer 1

Не нужно использовать EventEmitter.Передайте тело как Input дочернему компоненту.

ParentComponent - HTML

<div *ngIf="body">
 <app-agreements [body]="body"></app-agreements>
</div>

ParentComponent - TS

  ngOnInit() {
    this.getBody();
  }

  getBody() {
    this._agreementsService.getBodyService().subscribe(
        data => { 
        this.body = data;
        },
        err => console.error(err),
        () => console.log('done loading foods')
      )
  }

ChildComponent - TS

export class AgreementsComponent {

     @Input() body;

}

См. Мою демонстрацию StackBlitz .

Answer 2

нет, вы не можете сделать это, но есть 2 варианта

• ViewChild

получает компонент соглашений о приложениях в home-компоненте @ViewChild, а когда приходят данные, вы вызываете функцию соглашений о приложениях, подобную этой

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.sass"]
})
export class HomeComponent implements OnInit {
  private body;

  @ViewChild(AgreementsComponent)
  agreementsComp: AgreementsComponent;

  constructor(private _agreementsService: AgreementsService) {}

  ngOnInit() {}

  getBody() {
    return this._agreementsService.getBodyService().subscribe(
      data => {
        this.agreementsComp.processData(data);
      },
      err => console.error(err),
      () => console.log("done loading foods")
    );
  }
}

и компонент внутренних соглашений добавляет метод processData.

второй и лучший вариант

• Связывание свойств

добавить свойство ввода в компонент соглашений, а когда данные поступят, просто назначить его и прослушать событие ngOnChanges в компоненте соглашений, подобном этому

export class AgreementsComponent implements OnInit, OnChanges {

  @Output() getBody = new EventEmitter<any>();

  @Input() data: any;

  private body;

  constructor() {}

  ngOnInit() {}

  ngOnChanges() {
    if (data) {
      ///Do your logic here
    }
  }
}

и это домашний компонент html

<app-agreements [data]="body" (getBody)="getBody($event)"></app-agreements>