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

Posted 2023-03-13

【中文标题】无法在角度 6 中访问从父母到孩子的方法

【英文标题】：Not able to access method from parent to child in angular 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 指令。这里讨论了一个类似的话题***.com/questions/35328652/…

@Output 不是用于孩子与父母的交流吗？我必须完成这项工作，我不能直接调用该 createTest。否则，我现在的解决方案是将此组件直接用作 html 到父组件中，我试图不这样做。

【参考方案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() 方法包含很多来自父组件本身的方法。