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

Vous pouvez le faire en utilisant @ViewChild Pour plus d'informations, consultez ce site lien

Avec sélecteur de type

composant enfant

@Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class ChildCmp {
  doSomething() {}
}

composant parent

@Component({
  selector: 'some-cmp',
  template: '<child-cmp></child-cmp>',
  directives: [ChildCmp]
})
class SomeCmp {

  @ViewChild(ChildCmp) child:ChildCmp;

  ngAfterViewInit() {
    // child is set
    this.child.doSomething();
  }
}

Avec un sélecteur de chaîne

composant enfant

@Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class ChildCmp {
  doSomething() {}
}

composant parent

@Component({
  selector: 'some-cmp',
  template: '<child-cmp #child></child-cmp>',
  directives: [ChildCmp]
})
class SomeCmp {

  @ViewChild('child') child:ChildCmp;

  ngAfterViewInit() {
    // child is set
    this.child.doSomething();
  }
}

Answer 2

Je pense que le moyen le plus simple est d'utiliser le sujet. Dans l'exemple de code ci-dessous, l'enfant sera notifié chaque fois que 'tellChild' est appelé.

Parent.component.ts

import {Subject} from 'rxjs/Subject';
...
export class ParentComp {
    changingValue: Subject<boolean> = new Subject();
    tellChild(){
    this.changingValue.next(true);
  }
}

Composant.parent.html

<my-comp [changing]="changingValue"></my-comp>

Child.component.ts

...
export class ChildComp implements OnInit{
@Input() changing: Subject<boolean>;
ngOnInit(){
  this.changing.subscribe(v => { 
     console.log('value is changing', v);
  });
}

Echantillon de travail sur Stackblitz

Answer 3

Cela a marché pour moi ! Pour Angular 2, appelez la méthode du composant enfant dans le composant parent.

Parent.component.ts

    import { Component, OnInit, ViewChild } from '@angular/core';
    import { ChildComponent } from '../child/child'; 
    @Component({ 
               selector: 'parent-app', 
               template: `<child-cmp></child-cmp>` 
              }) 
    export class parentComponent implements OnInit{ 
        @ViewChild(ChildComponent ) child: ChildComponent ; 

        ngOnInit() { 
           this.child.ChildTestCmp(); } 
}

---

Child.component.ts

import { Component } from '@angular/core';
@Component({ 
  selector: 'child-cmp', 
  template: `<h2> Show Child Component</h2><br/><p> {{test }}</p> ` 
})
export class ChildComponent {
  test: string;
  ChildTestCmp() 
  { 
    this.test = "I am child component!"; 
  }
 }

---

Answer 4

Angular - Appel de la méthode du composant enfant dans le modèle du composant parent

Vous avez un ParentComponent et un ChildComponent qui ressemble à ceci.

parent.component.html

parent.component.ts

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

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

composant.enfant.html

<p>
  This is child
</p>

composant.enfant.ts

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

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

  doSomething() {
    console.log('do something');
  }
}

Au moment de servir, ça ressemble à ça :

Lorsque l'utilisateur met l'accent sur l'élément d'entrée du composant parent, vous voulez appeler la méthode doSomething() du composant enfant.

Faites simplement ceci :

1. Donnez au sélecteur app-child dans parent.component.html un nom de variable DOM (préfixe avec # - hashtag) dans ce cas, nous l'appelons appChild.
2. Attribuez la valeur de l'expression (de la méthode que vous voulez appeler) à l'événement de focus de l'élément d'entrée.

Le résultat :

Answer 5

La réponse de user6779899 est soignée et plus générique Cependant, sur la base de la demande d'Imad El Hitti, une solution légère est proposée ici. Elle peut être utilisée lorsqu'un composant enfant est étroitement lié à un seul parent.

Parent.component.ts

export class Notifier {
    valueChanged: (data: number) => void = (d: number) => { };
}

export class Parent {
    notifyObj = new Notifier();
    tellChild(newValue: number) {
        this.notifyObj.valueChanged(newValue); // inform child
    }
}

Composant.parent.html

<my-child-comp [notify]="notifyObj"></my-child-comp>

Child.component.ts

export class ChildComp implements OnInit{
    @Input() notify = new Notifier(); // create object to satisfy typescript
    ngOnInit(){
      this.notify.valueChanged = (d: number) => {
            console.log(`Parent has notified changes to ${d}`);
            // do something with the new value 
        };
    }
 }