如何在Angular中从外部调用组件的功能

Question

How to invoke a function of an Angular Component from parant component. What I am trying to achieve here is to get a confirmation message before closing the modal in the parant component.

The function inside the child component will check for unsaved changes. And if there are any unsaved changes, child will call then another modal for confirmation.

Upon confirmation from this internal modal, I will then call back again the modal in the parant to invoke a this.autoPopupUnratedModal.dismiss() call

This is kinda coupled with mess but I am not able to find a clear solution. Although there are many answeres to this question, nothing seems to solve my problem. Maybe I am look at the wrong sources.

<modal #autoPopupUnratedModal size="lg" [keyboard]="'false'" [backdrop]="'static'">
    <modal-header [show-close]="true">
        <h2 class="modal-title">List of unrated jobs</h2>
    </modal-header>
    <modal-body>

        <unrated-job-notification #unratedNofitication
                 [(onDiscard)]="isCloseNotification"
                 (onDiscard)="onCloseConfirmation($event)">
        </unrated-job-notification>

    </modal-body>
    <modal-footer [show-default-buttons]="false">
        <button type="button" class="btn" (click)="rateAnotherTime()">
           Rate another time
        </button>
    </modal-footer>
</modal>

Answer 1

To call a child's function from it's parent, you can use viewchild to get it's reference or a service with of rxjs observable implementation.

Using viewchild will suit your problem Here is a sample child and parent component where the parent is calling foo() method of it's child component

Child component

import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  constructor() { }

  foo() {
    // I will be called from my parent
  }

}

Parent component

<app-child #child_comp></app-child>




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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  @ViewChild('child_comp') childComp;
  constructor() { }

  ngOnInit() {
    this.childComp.foo();
  }

}