Angular: ошибка при вызове функции из родительского компонента

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

slices.component.html (parent)

           <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 2

Оказывается, это было очень простое решение, мне просто пришлось изменить (click)="yourChild.saveSlice()" на (click)="child.saveSlice()".

Answer 3

чтобы управлять функцией из вашего дочернего компонента в родительском компоненте, вам нужно использовать выходные данные для достижения этой цели. Например, у вас есть

Предполагая, что это функция вашего дочернего представления, т.е. 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
}

Это сделает это.