Question

我在这个组件中有一个父组件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');
}

程序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()函数

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

任何帮助将不胜感激，

由于

Answer 1

您需要了解每次在页面/组件上更改内容时都会调用 ngAfterContentInit ，如果您在父级中定义了内容，则会在每次勾选/单击时加载在申请上。这不是访问子组件的更智能方法。有两种与子组件交互的方法，ad得到你想要的东西：

使用Emiterr
使用@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();

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

1 个答案: