Comment envoyer une variable au composant parent

Question

J'ai un problème avec mon projet angulaire 4. Mon principal composant ont un utilisateur variable:

export class AppComponent { 
    public user: User = null; 
} 

Son HTML est:

{{user.name}} 
<router-outlet></router-outlet> 

lieu de routeur de sortie J'ai un composant enfants qui change la valeur de l'utilisateur quand je l'appelle connexion():

export class ChildrenComponent { 
    login() { 
    user.name = 'Toto'; 
    } 
} 

Maintenant, je voudrais envoyer la valeur de l'utilisateur au composant parent.

C'est possible?

Merci!

Answer 1

Vous pouvez utiliser l'injection de dépendance d'angular.

@Component() { 
    .... 
} 
export class Parent { 
    public user: User; 
    .... 
} 

@Component() { 
.... 
} 
export class Child { 
    constructor(public parent: Parent) { 
    } 

    someAction() { 
    this.parent.user = user; 
    } 
} 

parents et enfants sont des noms symboliques, vous devez remplacer vos noms de composants (par exemple, MainContainer et LoginComponent). En outre, vous pouvez envisager de rendre le parent facultatif afin que votre composant n'échoue pas si vous l'utilisez ailleurs. Notez que cela fonctionne dans l'imbrication normale, vous devez vérifier qu'il fonctionne avec des prises.

Vous pouvez également envisager de créer une entrée pour le membre parent afin qu'il déclenche le rendu lors du changement de valeur.

Answer 2

Vous devez utiliser EventEmmiter pour émettre votre composant parent que l'utilisateur a modifié et vous pouvez envoyer vos données dans votre événement par exemple.

Votre modèle de composant parent:

<your-child-component (selectedUser)="selectUser($event)"></your-child-component> 

Votre ParentComponent:

export class ParentComponent { 
    user: any; 

    selectUser(user) { 
    this.user= user; 
    } 
} 

Votre ChildComponent:

export class ChildComponent{ 
    user: any; 

    @Output() selectUser = new EventEmitter<any>(); 

    onSelectUser(user: any) { 
    this.selectUser.emit(user); 
    } 
} 

Vous pouvez trouver bon exemple there

Answer 3

Merci Meir votre solution est bonne! Pour les autres c'est une bonne solution mais avec routeur-sortie je ne peux pas utiliser EventEmitter pour envoyer ma variable