Le Passage Des Données À Partir D'Enfant De Composant En Composant Parent

J'ai des problèmes avec mon angulaire, ici, j'ai deux composantes:

  • MyApp (ParentComponent)
  • LoginPage (ChildComponent)

J'ai une propriété UserNow dans les parties MyApp et je veux mettre la valeur de la propriété UserNow à travers les composants LoginPage. Comment faire?

J'ai essayé (mais ne donne aucune influence)

Import {MyApp} from '../../app/app.component'; 

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
    public app: any;

    login() {
        ...
        this.app = MyApp;
        this.app.userNow = MyValue;
        ...
    }
}
peut-être vérifier ici angular.io/docs/ts/latest/cookbook/component-communication.html

OriginalL'auteur int11 | 2016-12-06

  1. 13

    Il y a plusieurs façons de le faire.

    1) à l'Aide d'un service: Un service a généralement une seule instance de l'application et peut être utilisé pour partager des données entre les composants facilement.
    E. g. créer un service userService et de l'injecter dans les composants à l'endroit où vous souhaitez l'utiliser.

    2) à l'aide d'Émettre: Emit est utilisé pour émettre un événement dans l'application et actions qui peuvent être prises.

    this.eventInChild.emit(data);

    Deux mesures peuvent être prises dans l'événement de l'émission.

    • l'appel d'une fonction de parent :

    <child-component (eventInChild)="parentFunction($event)"></child-component>

    • Émettant de service et l'Abonnement à un événement(peut être souscrit dans le service ainsi que les composants) :

    En Service, Il va comme ceci:

    getEmitStatus() {
    return this.eventInService;
}

//In component or service - to listen to event

this.subscription = this.userService.getEmitStatus()
    .subscribe(item => {
         //thing to do here
});

    OriginalL'auteur SaUrAbH MaUrYa

  2. 4

    Comme @SaUrAbHMaUrYa expliqué, vous pouvez émettre des données à partir d'enfant à parent, je voudrais faire quelque chose comme ceci :

    Parent

    <page-login (on_user_has_logged_in)="userNow = $event"></page-login>

    Enfant :

    import {Output}       from '@angular/core'
import {EventEmitter} from '@angular/core'

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
    @Output() on_user_has_logged_in : EventEmitter<any> = new EventEmitter()

    login(MyValue) {
        this.on_user_has_logged_in.emit(MyValue)
    }
}
    Je pense que le code devrait être: this.on_user_has_logged_in.emit(MyValue) au lieu de this.on_user_has_logged_in(MyValue). Corrigez-moi si je me trompe.
    Vous avez entièrement raison @KunalKakkad, merci de m'en apercevoir!

    OriginalL'auteur Hadrien TOMA