Angular 6：如何使用模板引用变量来调用子方法？

Posted 2023-02-23

【中文标题】Angular 6：如何使用模板引用变量来调用子方法？

【英文标题】：Angular: How to use template reference variable for calling child method?

【发布时间】：2018-11-28 19:50:06

【问题描述】：

我正在尝试使用模板引用变量从父组件调用子组件的方法。我尝试如下，

navigation.component.html

<button type="button" class="btn btn-primary relative waves-light" (click)="CartTable.loadCart()" mdbWavesEffect>My Cart</button>

<app-cart-table-modal #CartTable></app-cart-table-modal>

cart-table-modal.component.ts

import  Component  from '@angular/core';


@Component(
  selector: 'app-cart-table-modal',
  templateUrl: './cart-table-modal.component.html',
  styleUrls: ['./cart-table-modal.component.scss']
)
export class CartTableModalComponent implements OnInit 

  constructor()    

loadCart()
 console.log('load cart called');

但是我得到一个错误

ERROR TypeError: jit_nodeValue_5(...).loadCart 不是函数

请告诉我，如何解决此错误.. 提前谢谢..

【问题讨论】：

无法复制：stackblitz.com/edit/…。发布一个完整的最小示例（就像我刚才所做的那样）重现问题。

Call child component method from parent class - Angular的可能重复

【参考方案1】：

您可以通过@ViewChild()装饰器从子组件调用公共方法。

child.component.ts

export class ChildComponent implements OnInit 

  constructor()    

  method1()
    console.log('logged me!');
  

parent.component.html

<div>
    <button (click)="onLogged()">Logged Me!</button>
    <child-comp #childComp></child-comp>
</div>

parent.component.ts

export class ParentComponent implements OnInit 

  @ViewChild(ChildComponent) child_component: ChildComponent;

  constructor()    

  onLogged()
    this.child_component.method1();
  

在angular.io 中阅读有关组件交互的更多信息。