角度：从父组件调用函数时发生错误

Question

我正在尝试从我的角度应用程序的父组件中调用子组件的功能，但出现错误

在我的父组件（称为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函数和其他功能出现故障，导致子项产生了很多问题。我该如何解决？

Answer 1

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

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

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

然后在子组件中从角铁芯导入事件发射器

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
}

这将完成它。

Answer 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();
}

Answer 3

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