如何将订阅函数传递给父组件？（Angular）答案

【问题标题】：How to pass the subscribe function to the parent component?(Angular)如何将订阅函数传递给父组件？（Angular）
【发布时间】：2019-09-10 23:09:28
【问题描述】：

如何将订阅函数从 REST API 获取信息从子组件（agreements.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>

【问题讨论】：

标签： angular rest

【解决方案1】：

不，你不能这样做，但有 2 个选项

查看孩子

通过@ViewChild 获取home-component 中的app-agreements 组件，当数据到来时调用app-agreements 函数像这样

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

【讨论】：

【解决方案2】：

无需使用EventEmitter。将正文作为 Input 传递给子组件。

父组件 - HTML

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

父组件 - TS

  ngOnInit() {
    this.getBody();
  }

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

子组件 - TS

export class AgreementsComponent {

     @Input() body;

}

见我的StackBlitz Demo。

【讨论】：