Appel d'une méthode de composant enfant à partir de la classe parent - Angular

Question

J'ai créé un composant enfant qui possède une méthode que je veux invoquer.

Lorsque j'invoque cette méthode, elle ne déclenche que la fonction console.log() il ne définira pas la ligne test propriété ?

Voici l'application Angular de démarrage rapide avec mes modifications.

Parent

import { Component } from '@angular/core';
import { NotifyComponent }  from './notify.component';

@Component({
    selector: 'my-app',
    template:
    `
    <button (click)="submit()">Call Child Component Method</button>
    `
})
export class AppComponent {
    private notify: NotifyComponent;

    constructor() { 
      this.notify = new NotifyComponent();
    }

    submit(): void {
        // execute child component method
        notify.callMethod();
    }
}

Enfant

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

@Component({
    selector: 'notify',
    template: '<h3>Notify {{test}}</h3>'
})
export class NotifyComponent implements OnInit {
   test:string; 
   constructor() { }

    ngOnInit() { }

    callMethod(): void {
        console.log('successfully executed.');
        this.test = 'Me';
    }
}

Comment puis-je définir le test la propriété également ?

Answer 1

Prenons l'exemple suivant,

import import { AfterViewInit, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { CountdownTimerComponent }  from './countdown-timer.component';

@Component({
    selector: 'app-countdown-parent-vc',
    templateUrl: 'app-countdown-parent-vc.html',
    styleUrl: [app-countdown-parent-vc.css]
})
export class CreateCategoryComponent implements OnInit, AfterViewInit {
    @ViewChild(CountdownTimerComponent, {static: false}) private timerComponent: CountdownTimerComponent;
    ngAfterViewInit() {
        this.timerComponent.startTimer();
    }

    submitNewCategory(){
        this.ngAfterViewInit();
    }
}

Pour en savoir plus sur @ViewChild, cliquez ici .

Answer 2

J'ai eu une situation exacte où le composant Parent avait un Select dans un formulaire et, lors de l'envoi, j'avais besoin d'appeler la méthode du Child-Component correspondant en fonction de la valeur sélectionnée dans l'élément select.

Parent.HTML :

<form (ngSubmit)='selX' [formGroup]="xSelForm">
    <select formControlName="xSelector">
      ...
    </select>
<button type="submit">Submit</button>
</form>
<child [selectedX]="selectedX"></child>

Parent.TS :

selX(){
  this.selectedX = this.xSelForm.value['xSelector'];
}

Enfant.TS :

export class ChildComponent implements OnChanges {
  @Input() public selectedX;

  //ngOnChanges will execute if there is a change in the value of selectedX which has been passed to child as an @Input.

  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
    this.childFunction();
  }
  childFunction(){ }
}

J'espère que cela vous aidera.