无法在角度 6 中访问从父母到孩子的方法答案

【问题标题】：Not able to access method from parent to child in angular 6无法在角度 6 中访问从父母到孩子的方法
【发布时间】：2020-02-24 09:02:55
【问题描述】：

我无法获取另一个父方法，该方法在我用作输入并在子组件中调用的父方法中调用。

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，粗略的想法）

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

现在我会提到子组件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);
  }

但不幸的是我收到了一个错误：

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

【问题讨论】：

尝试删除它。只调用 createTest(this.data)
或者您可以在 subCustomPagination.ts 中使用 @output 指令，而不是使用此 sysntax 在 treeComponent.html 中获取该事件.. (fromSubComponet)= "fetchChildrenForPage"
我做不到。这是该方法的小型化形式。 this.createTest 包含另一组 5 6 方法，它们是该父类的一部分。这就是为什么我需要更微妙的解决方案。
我同意 GaurangDhorda 的观点。如果要在 TreeMapComponent 中使用子数据，那么您应该使用 @Output 指令。这里讨论了一个类似的话题stackoverflow.com/questions/35328652/…
@Output 不是用于孩子与父母的交流吗？我必须完成这项工作，我不能直接调用该 createTest。否则，我现在的解决方案是将此组件直接用作 html 到父组件中，我试图不这样做。

标签： angular angular6

【解决方案1】：

当您从子组件调用父方法时，ferchChilderForPage 中的 this 上下文将引用子组件

示例

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

试试这个

将父实例传递给子组件，然后从子组件调用父方法

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');
  }

}

或者

使用ViewChid从子组件访问父组件实例

Example

【讨论】：

【解决方案2】：

您在SubCustomPaginationComponent 中调用fetchChildrenForPage 函数，它没有对我有意义的createTest 函数。尝试删除createTest 函数并使用console.log 或在SubCustomPaginationComponent 中定义CreateTest 函数

【讨论】：

我没明白。究竟什么是没有意义的？我将fetchChildrenForPage 发送到子组件，然后哪个子组件运行fetchChildrenForPage。 Bt fetchChildrenForPage 包含另一个方法，它属于同一 parent function
fetchChildrenForPage 包含引用this 和this 的函数，在这种情况下是指SubCustomPaginationComponent，而不是其父级。而SubCustomPaginationComponent没有这个方法。
哦，明白了。完全有道理。我不知道还有什么方法可以拉这个。真正的 this.chartTest() 方法包含很多来自父组件本身的方法。