加载父组件数据时如何从子组件调用函数（Angular 5）答案

【问题标题】：How to call function from child component when parent component data has loaded (Angular 5)加载父组件数据时如何从子组件调用函数（Angular 5）
【发布时间】：2018-02-20 04:18:19
【问题描述】：

我在这个组件中有一个父组件program-page.component 我正在调用一个函数来获取一些数据

ngOnInit() {
this.getProgress();
}

getFirstProgramItem() {
   this._contentfulService.getProgramItem(4, 1)
    .then((programItem) => {
     this.programItem = programItem;
   }).then(() => {
     console.log(this.programItem);
   });
}

getProgress() {
this._trackingService.getLastItemProgress()
  .subscribe((result) => {
    this.progress = result;
    if (this.progress.sysID == null || undefined) {
      this.getFirstProgramItem();
    }
  });
}

然后在我的 program-page.component.html

<app-program-header></app-program-header>
<app-week-display></app-week-display>
<app-program-item [item]="programItem"></app-program-item>

我正在传递 programItem 数据.. 然后在我的 program-item.component.ts 我正在获取数据并填充它

import { Component, OnInit, AfterViewInit, OnDestroy, Input } from '@angular/core';
import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { Entry } from 'contentful';
import { ContentfulService } from '../../../contentful.service';

declare var Player: any;
declare var Vimeo: any;

@Component({
  selector: 'app-program-item',
  templateUrl: './program-item.component.html',
  styleUrls: ['./program-item.component.scss']
})
export class ProgramItemComponent implements OnInit {

@Input() item: Entry<any>;

constructor(
    private contentfulService: ContentfulService
) { }

ngOnInit() {} 

loadVideo() {
   const video = new Vimeo.Player('video');
}

program-item.component.html

<div class="program-item">
<div class="main">
    <p *ngIf="item?.fields.asset[0].fields.textBlock" class="program-item_textblock">{{item?.fields.asset[0].fields.textBlock}}</p>
    <div id="video-panel">
      <div *ngIf="item?.fields.asset[0].fields.vimeoId" [attr.data-vimeo-id]="item?.fields.asset[0].fields.vimeoId" data-vimeo-responsive="1" id="video"></div>
    </div>
  </div>
</div>

现在我想要发生的是在加载数据时/之后调用loadVideo()function

我尝试过使用 ngAfterContentInit 但没有做任何事情

任何帮助将不胜感激，

谢谢

【问题讨论】：

可以使用ngOnChanges函数，通过参数item查看SimpleChanges。
@elvis_ferns 抱歉，您能详细说明一下吗？什么是SimpleChanges
每当@Input 数据发生任何变化时，ngOnChanges 都会使用包含输入的旧值和新值的参数 SimpleChanges 调用。参考OnChanges
@elvis_ferns 嘿，谢谢！

标签： javascript angular typescript vimeo vimeo-player

【解决方案1】：

您需要了解，每次页面/组件上的内容发生更改时都会调用 ngAfterContentInit，并且如果您已在父级中定义了它，则会在每次滴答/点击时加载在一个应用程序上。这不是访问子组件的更聪明的方法。有两种方法可以与子组件交互，得到你想要的：

使用 Emitrr
使用@ViewChild

1）如果它有任何来自孩子的数据，你想在父母中看到，请使用事件发射器，这里有一些很好的参考：

Angular 2 Custom Event Binding + EventEmitter Example

Passing data to and from a nested component in Angular 2

2）如果你只是想从父类调用子类方法，你可以在你的父类中使用子组件如下：

@ViewChild(ProgramItemComponent ) child:ProgramItemComponent;
this.child.loadVideo();

【讨论】：