角度:如何使用模板引用变量调用子方法?

Question

我正在尝试使用模板引用变量将方法从父组件调用到子组件。我试过了，如下所示，

导航组件.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');
}
}

但是我收到一个错误，因为

错误

类型错误： jit_nodeValue_5(...(.加载购物车不是一个函数

请让我知道，如何解决此错误。提前谢谢..

Answer 1

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

child.component.ts

export class ChildComponent implements OnInit {
constructor() {   }
method1(){
console.log('logged me!');
}
}

父组件.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 中的组件交互的更多信息。