无法在 angular 6 中访问从父到子的方法

Question

I am not able to fetch another method of parent which is called in method of parent that i am using as input and calling in child component.

export class TreeMapComponent {

  data;

  constructor(public dialog: MatDialog, private router: Router) { }

  ngOnInit() {

    let results=[1,2,3]

  }
  fetchChildrenForPage(page, pagePerPage) {
    let results={soemthing: 898, children: [1,2,3,3,4,5,6,7,8,8,8,5,3,3,4]}
    this.data = { ...results, children: results.children.slice(1, 5) };
    this.createTest(this.data);
  }


  createTest(clusterInfo): void{
      console.log(clusterInfo)
   }
}

TreeMapComponent.html (html that i am using for above component, rough idea)

<app-sub-custom-pagination[fetchChildrenForPage]="fetchChildrenForPage">
  </app-sub-custom-pagination>

Now i will mention the child component app-sub-custom-pagination

export class SubCustomPaginationComponent implements OnInit {


  @Input()
  fetchChildrenForPage;
  currentPage;

constructor() { }

ngOnInit() {
   selectPage(0);
}

selectPage(index): void {
    this.currentPage = (index + 1);
    this.fetchChildrenForPage(this.currentPage, this.quantityPerPage);
  }

But unfortunately i am getting an error:

ERROR TypeError: this.createTest is not a function
.
.
.

Answer 1

When you call a parent method from child component the this context inside ferchChilderForPage will be refer to child component

Example

fetchChildrenForPage(page, pagePerPage){
    console.log(page, pagePerPage, this); //this will refer to child component When you call from child
   //  this.createTest('ClusterInfo');
  }

Try this

Pass parent instance to child component then call the parent method from child component

parent.component.html

<app-demo [appInstance]="this"></app-demo>

parent.component.html

export class DemoComponent implements OnInit {
  @Input() appInstance;
  constructor() { }

  ngOnInit() {
  }

  onClick(){

    this.appInstance.fetchChildrenForPage('demo','demo2');
  }

}

Or

Use ViewChid to access parent component instance from child

Example

Answer 2

you are calling fetchChildrenForPage function in SubCustomPaginationComponent which it does not have createTest function that makes sense to me. Try to remove createTest Function and just use console.log or define CreateTest Function in SubCustomPaginationComponent