Appel de l'enfant composant de méthode de classe parent - Angulaire

J'ai créé un composant enfant qui a une méthode que je voudrais invoquer.

Quand j'ai appeler cette méthode il ne feux de la console.log() ligne, il ne sera pas mis le test bien??

Ci-dessous est le guide de démarrage rapide Angulaire app 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 régler le test bien ainsi?

Double Possible de Appeler une méthode de l'enfant composant

InformationsquelleAutor shammelburg | 2016-08-16

143

Vous pouvez le faire en utilisant @ViewChild pour plus d'informations, consultez cette lien

Avec sélecteur de type de
```
@Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class ChildCmp {
  doSomething() {}
}
@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 de la ficelle sélecteur de
```
@Component({
  selector: 'child-cmp',
  template: '<p>child</p>'
})
class ChildCmp {
  doSomething() {}
}
@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();
  }
}
```
- J'ai suivi votre démarche, mais j'obtiens une erreur lors de l'utilisation de directives: [ChildCmp], Le message d'erreur indique: les directives "n'existe pas dans le type "Composant". J'ai googlé et trouvé des directives est obsolète dans rc5. Alors, comment le gérer sur la version la plus récente. S'il vous plaît aider.
- essayez ce lien angulaire.io/guide/composant interaction et de commenter les directives lien
- Comment le faire fonctionner quand il y a plusieurs enfants de la même classe??
- Vous êtes génial!!!
- prévu". Une erreur est venue lorsque j'essaie d'écrire @ViewChild ("enfants") de l'enfant:ChildCmp;dans le composant. S'il vous plaît aider! Et Aussi je ne peut pas importer le même dans la directive, il me donne l'erreur comme "directive: (typeof EmployeeProfileC..." n'est pas assignable à paramètre de type "Composant". Objet littéral pouvez uniquement spécifier les propriétés connues, et de la 'directive' n'existe pas dans le type "Composant"."
InformationsquelleAutor rashfmnb
37

Cela a Fonctionné pour moi ! Angulaire 2 , Appel à l'enfant une méthode de composant en composant parent

Parent.composante.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(); } 
}
```
Enfant.composante.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!"; 
  }
 }
```
- Qu'est-ce que ChildVM dans cette ligne: @ViewChild(ChildComponent ) enfant: ChildVM;
- Je pense que l'OP signifiait ChildComponent par ChildVM
- Je pensais que ce serait créer une instance séparée de la partie mais il fait des appels de la fonction à partir de votre exemple avec des variables dans l'état actuel de la composante, la vache! cette méthode est meilleure que la première réponse!
- Je suis toujours pas défini la valeur de la "ce.enfant"
- J'ai le même problème que @AmbujKhanna
- Je suppose que pour cela.l'enfant étant pas défini, c'est que ViewChild pointe à quelque chose qui n'existe pas dans le modèle, ou vous tentez d'y accéder trop tôt dans le cycle de vie, par exemple dans le constructeur.
InformationsquelleAutor Kaur A
17

Je pense que le plus facile est d'utiliser l'Objet. En soufflet exemple de code de l'enfant seront informés chaque fois qu'tellChild' est appelé.

Parent.composante.ts
```
import {Subject} from 'rxjs/Subject';
...
export class ParentComp {
    changingValue: Subject<boolean> = new Subject();
    tellChild(){
    this.changingValue.next(true);
  }
}
```
Parent.component.html
```
<my-comp [changing]="changingValue"></my-comp>
```
Enfant.composante.ts
```
...
export class ChildComp implements OnInit{
@Input() changing: Subject<boolean>;
ngOnInit(){
  this.changing.subscribe(v => { 
     console.log('value is changing', v);
  });
}
```
Échantillon de travail sur Stackblitz
- C'est une solution élégante, mais il ne fonctionne pas correctement dans tous les cas, probablement en raison Angulaire de la détection de changement pas de vous abonner.
- Trouvé ceci pour être la meilleure solution pour mon cas d'utilisation. Fonctionne comme un charme. Merci!
- Neat ! Pour les cas les plus simples, vous pouvez éviter le Sujet/Abonnez-vous frais généraux par le passage d'un objet qui a une méthode de rappel à l'enfant. Similaire à ce qui précède, l'enfant remplace le rappel de recevoir des indications de la part du parent.
- toute chance vous pouvez partager votre solution pour passer d'un objet avec de rappel ?
- ajout d'un exemple de solution comme une réponse distincte, parce que le code n'est pas autorisé dans les commentaires.
InformationsquelleAutor user6779899

user6779899 la réponse est soignée et plus générique
Toutefois, en fonction de la demande par Imad El Hitti, un peu de poids de la solution proposée ici. Ceci peut être utilisé lorsqu'un enfant composant est étroitement lié à un seul parent.

Parent.composante.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
    }
}

Parent.component.html

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

Enfant.composante.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 
        };
    }
 }

Ah je vois, merci !

InformationsquelleAutor shr

2

Angulaires – Appel en Composant Enfant de la Méthode dans le Parent du Composant de Modèle

Vous avez ParentComponent et ChildComponent qui ressemble à ceci.

parent.component.html

parent.composante.ts
```
import {Component} from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  constructor() {
  }
}
```
child.component.html
```
<p>
  This is child
</p>
```
enfant.composante.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');
  }
}
```
Lors de la servir, il ressemble à ceci:

Lorsque l'utilisateur se concentrer sur ParentComponent de l'élément d'entrée, vous voulez appeler ChildComponent méthode doSomething ().

Simplement faire ceci:
1. Donner app-sélecteur d'enfant en parent.component.html un DOM nom de la variable
  (préfixe # – hashtag), dans ce cas, nous appelons appChild.
2. Affecter l'expression de la valeur (de la méthode que vous voulez l'appeler) de l'élément d'entrée d'événements de focus.
Le résultat:
- OK, mais nous voulons aussi le faire par programmation à l'aide de ts
- Pour une utilisation à partir de l'intérieur de la composante: @ViewChild('appChild', { static: false }) appChild: ElementRef<HTMLElement>; et de les utiliser plus tard this.appChild.doSomething()
InformationsquelleAutor Hemant Ramphul

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 {
         @ViewChild(CountdownTimerComponent, {static: false})
         private timerComponent: CountdownTimerComponent;
         ngAfterViewInit() {
             this.timerComponent.startTimer();
         }

         submitNewCategory(){
            this.ngAfterViewInit();     
         }

Lire plus sur @ViewChild ici.

InformationsquelleAutor lwairore

Vous devez vous connecter pour publier un commentaire.