从angular 7中的孙子组件调用方法

我有一个angular 7应用程序，试图从它的孙子组件调用Parent的方法。我有一个模态分量，它是孙子的分量。我正在尝试从那里调用该方法。我使用有效的输出事件从其直接父级调用相同的方法 但是我怎么从孙子那里打电话呢

我已经宣布了这一事件

@Output（）termDetailsEvent=neweventEmitter（）；

并以这种方式调用父方法：

this.termDetailsEvent.next（'getTermsDetails'）

父组件

从'@angular/core'导入{Component，OnInit，Input，ViewChild}；
从“../services/terms.service”导入{TermsService}；
从“./fundClasses/fundClasses.component”导入{FundClassesComponent}；
@组成部分({
选择器：“经理条款”，
templateUrl:'terms.component.html'
})
导出类TermsComponent实现OnInit{
私有错误：字符串；
公共条款详情：任何；
私人管理者策略ID：编号；
过滤类：任何；
原创者：任何；
基金：任何；
FundClassType：任意类型；
基金：任何；
public get ManagerStrategyId（）：编号{
将此返回。\u ManagerStrategyId；
}
@ViewChild（FundClassesComponent）
fundClassesComponent：fundClassesComponent；
@输入（）
公共集管理器策略ID（值：number）{
这。_ManagerStrategyId=值；
}
基金类别：任何；
法律基金类别：任何；
原始基金类别：任何；
构造函数（专用术语服务：术语服务）{}
恩戈尼尼特（）{
this.init（）；
}
init（）{
这个.getTermsDetails（）；
}
公共getTermsDetails（）{
如果（this.ManagerStrategyId！=null）{
this.termsService.getTermsDetails（this.ManagerStrategyId）.subscribe（（数据：any）=>{
this.TermDetails=数据；
this.OriginalList=JSON.parse（JSON.stringify（data））；
this.FundClasses=this.TermDetails.FundClassViewModel；
this.LegalFundClasses=this.TermDetails.LegalFundClassViewModel；
this.Funds=this.TermDetails.LegalFundClassViewModel.Funds；
this.FundClassType=this.TermDetails.LegalFundClassViewModel.FundClassType；
this.FirmFunds=this.TermDetails.LegalFundClassViewModel.FirmFunds；
此.TermDetails.FundClassViewModel.FundDetailsViewModel.forEach（funDetail=>{
funDetail.FundClassDetailsViewModel=funDetail.FundClassDetailsViewModel
.reduce（（上一个，下一个）=>prev=prev.concat（下一个），[]）
.filter（obj=>obj.InvestedAmount！==null）；
});
});
}
}
}

父组件html







子组件

从'@angular/core'导入{Component，OnInit，Input，ViewChild，Output，EventEmitter}；
从“../../services/terms.service”导入{TermsService}；
从“../../utilities/notify.service”导入{NotifyService}；
从“@amcharts/amcharts4/core”导入{number}；
从“../terms.interface”导入{IReview}；
从“./addLegalFundClass.component”导入{AddLegalFundClassComponent}；
从“./addSideLetter.component”导入{AddSideLetterComponent}；
从“./cloneLegalFundClass.component”导入{CloneLegalFundClassComponent}；
@组成部分({
选择器：“经理法定基金类别”，
templateUrl:“./legalFundClasses.component.html”
})
导出类LegalFundClassesComponent在NIT上实现{
私人法律基金类：任何；
法律基金类别：任何；
@Output（）termDetailsEvent=新的EventEmitter（）；
public get LegalFundClasses（）：任意{
将此返回。_legalFundClasses；
}
@输入（）
公共集合LegalfundClass（值：任意）{
这个._legalFundClasses=值；
}
public-defaultItem:{Name:string，Id:number}={Name:“选择项…”，Id:null}；
构造函数（专用termsService:termsService，专用notify:NotifyService）{}
恩戈尼尼特（）{
this.init（）；
}
公共值：any=[{Id:null，名称：”“}]；
更新（id）{
this.LegalFundClass=this.LegalFundClasses.LegalFundClassDetailsViewModel
.find（obj=>obj.Id==Id）；
this.termsService.updateLegalFundClasses（this.LegalFundClass）.then（（结果）=>{
如果（结果）{
此.notify.success（'Legal Fund Class Details Successfully Update'）；
this.EditMode[id]=！this.EditMode[id]；
this.term detailsevent.next（'getTermsDetails'）；
}
}).catch（错误=>{
this.notify.error（'更新法定基金类别详细信息时出错'）；
});
}
删除（id）{
this.termsService.deleteLegalFundClasses（id）。然后（（结果）=>{
如果（结果）{
this.notify.success（'Legal Fund Class successful Deleted'）；
this.EditMode=！this.EditMode[id]；
this.term detailsevent.next（'getTermsDetails'）；
}
}).catch（错误=>{
this.notify.error（'删除基金类别详细信息时出错'）；
});
}

子组件html


X

孙子组件

导出类CloneLegalFundClassComponent实现OnInit{
私有错误：字符串；
公共管理者详细信息：任何；
公共编辑器配置：字符串；
公共克隆法
    import { Component, Output, EventEmitter, OnInit } from '@angular/core';
import { timer } from 'rxjs';


@Component({
  selector: 'app-grandchild',
  templateUrl: './grandchild.component.html',
  styleUrls: ['./grandchild.component.css']
})
export class GrandchildComponent implements OnInit {
  @Output() emitToChild: EventEmitter<void> = new EventEmitter();
  constructor() { }

  ngOnInit() {
    // emitting to child every two seconds, check console
    this.emit();
  }

  emit() {
    this.emitToChild.emit();
    timer(2000).subscribe(() => this.emit());
  }
}

<p>I'm grandchild.</p>

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Output() emitToParent: EventEmitter<void> = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }

}

<p>I'm child.</p>
<app-grandchild (emitToChild)="emitToParent.emit()"></app-grandchild>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  doSomething() {
    console.log('hello');
  }
}

<p>I'm Parent</p>

<app-child (emitToParent)="doSomething()"></app-child>