【问题标题】：Angular: Error when calling function from parent componentAngular：从父组件调用函数时出错
【发布时间】：2019-11-20 07:18:37
【问题描述】：

我正在尝试从我的 Angular 应用程序中的父组件调用子组件的函数，但出现错误

在我的父组件（称为slices 组件）中，子组件是这里的 snd-canvas 组件：

<snd-canvas #yourChild 
    *ngIf="isCanvasOpen" 
    [selectedSlice]="selectedSlice" 
    [parentComponent]="parentComponent">
</snd-canvas>

父组件中还有一个按钮，我想调用子组件中的 saveSlice() 函数：

<div *ngIf="!showSearchBar && isCanvasOpen">
    <button mat-icon-button 
        matTooltip="Save Slice" 
        (click)="yourChild.saveSlice()">
                ...icon...
    </button>
</div>

在 slice.component.ts 我有

import { Component, OnInit, ViewChild } from '@angular/core';
@ViewChild('yourChild') child;

但是，当我单击按钮时，出现以下错误：

ERROR TypeError: Cannot read property 'saveSlice' of undefined

我认为问题可能是当切片组件加载时 isCanvasOpen 被初始化为 false，因此 snd-canvas 组件尚未呈现并且未定义。我尝试将 *ngIf="isCanvasOpen" 更改为 [hidden]="isCanvasOpen" 以修复该错误，但导致 NgInit 函数和其他函数出现故障的孩子出现一堆问题。我该如何解决这个问题？

【问题讨论】：

是@ViewChild('yourChild') child; 组件类的属性吗？
是的，它的定义是这样的：export class SlicesComponent implements OnInit{ @ViewChild('yourChild') child; ....rest of code.... }
你试过(click)="child.saveSlice()"。注意它不应该是yourChild 而应该是child
感谢@user2216584 修复它。

标签： javascript angular angular-components

【解决方案1】：

为了在父组件上控制子组件的功能，您需要使用输出来实现。例如你有

假设这是您的子视图的功能，即 html

<div (click)="saveAll()></div>

然后在子组件中从角度核心导入Event Emitter

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

现在在导出类之后写这个。

@Output() saveData: EventEmitter<any>; // An output event emitter variable

constructor() {
    this.saveData = new EventEmitter<any>(); // instantiate the Event Emitter
}

saveAll() {
    this.saveData.emit('') // Pass the object of the data you want to save or alter, could be a string or anything depending on the type assigned to the EventEmitter
}

然后在您的父视图中添加编辑此代码并添加输出

<snd-canvas #yourChild 
        *ngIf="isCanvasOpen" 
        [selectedSlice]="selectedSlice" 
        [parentComponent]="parentComponent"
        (saveData)="saveData($event)">

此时你已经有了你的函数，在你的父组件中简单地调用函数

saveData(res) {
console.log(res); // You can console log it to see the passed data
}

这样就搞定了。

【讨论】：

虽然这是一个很好的建议，但这不是 OP 询问的内容

【解决方案2】：

slices.component.html（父）

           <snd-canvas #yourChild 
                        *ngIf="isCanvasOpen" 
                        [selectedSlice]="selectedSlice" 
                        [parentComponent]="parentComponent">
            </snd-canvas>

    <div *ngIf="!showSearchBar && isCanvasOpen">
        <button mat-icon-button 
                matTooltip="Save Slice" 
                (click)="CallsaveSlice()">
// CallsaveSlice() method can be called when *ngIf is true and the element will // exists in dom
                   ...icon...
        </button>
    </div>

slices.component.ts(父)

@ViewChild('yourChild') child;

CallsaveSlice(){

    this.child.saveSlice();
}

【讨论】：

【解决方案3】：

原来这是一个非常简单的解决方案，我只需将(click)="yourChild.saveSlice()" 更改为(click)="child.saveSlice()"。

【讨论】：

我已经在上面的解决方案中展示了这一点。希望对您有所帮助。