Angulaire 2 de sortie du routeur-prise

Je veux faire de la navigation de l'enfant composants de rendu à l'intérieur de routeur de sortie.
Mon composant parent ont un routeur config et je veux naviguer manuellement dans certains cas. Mais je ne sais pas comment je peux passer d'un enfant à un parent, des données (pour la navigation) sans sortie. Parce que cette construction est non travail

 <router-outlet (navigateTo)="navigateToMessagePart($event)"></router-outlet>

Comment je peux le faire dans le droit chemin? Peut-être naviguer de l'enfant? Mais comment je peux obtenir des méthodes parents de l'enfant.
Merci beaucoup pour toute aide!

InformationsquelleAutor Velidan | 2016-06-06

angular binding

42

<router-outlet></router-outlet> est juste un espace réservé pour l'ajout de acheminés composants. Il n'y a pas de support pour tout type de liaison.

Vous pouvez créer un <router-outlet> qui vous permet de le faire ou de plusieurs communes, l'utilisation d'un service partagé pour la communication entre le composant parent et acheminé composant.

Pour plus de détails, voir https://angular.io/docs/ts/latest/cookbook/component-communication.html

mise à jour

Il est maintenant un événement qui permet d'obtenir le composant ajouté
```
<router-outlet (activate)="componentAdded($event)" (deactivate)="componentRemoved($event)"></router-outlet>
```
qui permet de communiquer (appel getters, setters, et les méthodes) avec le composant de componentAdded()

Un service partagé est la meilleure façon de bien.
- Pouvez-vous expliquer pourquoi un service partagé est la meilleure façon?
- Car il n'y a pas d'autre bonne façon et un service partagé est le moyen privilégié de communication entre les composants qui ne sont pas directement parent-enfant en général.
InformationsquelleAutor Günter Zöchbauer
106

<router-outlet></router-outlet> ne peut pas être utilisé pour émettre un événement de l'enfant du composant. Un moyen de communiquer entre les deux composants est d'utiliser un service commun.

Créer un service

de services partagés.ts
```
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class SharedService {
    //Observable string sources
    private emitChangeSource = new Subject<any>();
    //Observable string streams
    changeEmitted$ = this.emitChangeSource.asObservable();
    //Service message commands
    emitChange(change: any) {
        this.emitChangeSource.next(change);
    }
}
```
Maintenant injecter de l'instance du service ci-dessus dans le constructeur de la société mère et de l'enfant composant.

Le composant enfant sera en émettant un changement à chaque fois que le onClick() la méthode est appelée

enfant.composante.ts
```
import { Component} from '@angular/core';
@Component({
    templateUrl: 'child.html',
    styleUrls: ['child.scss']
})
export class ChildComponent {
    constructor(
        private _sharedService: SharedService
    ) { }

onClick(){
  this._sharedService.emitChange('Data from child');

 }
}
```
Le composant parent doit recevoir ce changement. Pour ce faire,la capture de l'abonnement à l'intérieur de la mère du constructeur.

parent.composante.ts
```
import { Component} from '@angular/core';
@Component({
    templateUrl: 'parent.html',
    styleUrls: ['parent.scss']
})
export class ParentComponent {
    constructor(
        private _sharedService: SharedService
    ) {
          _sharedService.changeEmitted$.subscribe(
        text => {
            console.log(text);
        });
      }

}
```
Espère que cela aide 🙂
- S'il vous plaît pourriez-vous montrer comment vous pouvez alors utiliser "texte" sur le composant parent modèle? 🙂
- vous pourriez juste l'affecter à une variable locale. Par exemple: export classe ParentComponent { dummyText:string; constructeur( privé _sharedService: SharedService ) { _sharedService.changeEmitted$.abonnez-vous( texte => { cette.dummyText = texte; }); } }
- grande réponse, mais je tiens à préciser une petite chose: si nous ne faisons pas de désabonnement changeEmitted$ après la destruction de composant, il serait en prononçant plusieurs fois, puis l'un après nous retournons dans le composant
- j'ai essayé ceci mais je n'ai pas d'obtenir une valeur quelconque ? . ma valeur atteinte dans le service bits, il n'a pas entrer dans l'abonné feild .quelqu'un peut-il m'aider .
- même ici. Avez-vous trouvé une solution?
- Pas de . vous en pensez quoi
- oui, je n'ai trouver la solution. Vous devez ajouter à votre service pour les fournisseurs que dans le composant parent. Si vous l'ajouter à la fois le parent et l'enfant composants, une nouvelle instance du service est injecté dans les deux. Ou si un de service pour être partagée entre tous les composants de votre application, ajoutez-la à la de fournisseurs dans l'app.le module.ts
- Pouvez-vous utiliser un partage de services pour les différentes paires de composants ou est-il un partage de services/paire?
- Un service partagé peut être utilisé par plusieurs composants de l'écouter. Il n'est pas limité à une paire.
- MAIS comment partager une instance de service entre chaque paire de composantes connexes ? Par exemple je veux avoir un modal avec un acheminé composant à l'intérieur d'un auxiliaire de la route qui va définir une nouvelle valeur d'être récupérées dans la composante du courant principal. Il fonctionne, mais je veux être en mesure de l'utiliser pour les différents composants. Si le service est fourni à l'échelle mondiale, les composants obtiendrez une valeur qui ne s'adresse pas à eux. Dois-je utiliser la logique à l'intérieur du service à filtrer par les bénéficiaires de la valeur ?
- moi sirvio de mucho tu ejemplo , muchas gracias.
- nouvelle instance du service est injecté dans les deux explique tellement de choses dans angulaire! Merci, vous êtes un dieu 😀
- La accepté de répondre émission, vous pouvez utiliser un événement sur le routeur-prise
- Excellent exemple de l'utilisation d'un service partagé. Merci.
- CELA DEVRAIT ÊTRE DANS LES DOCS (<routeur-outlet></routeur-outlet> ne peut pas être utilisé pour émettre un événement du composant enfant.)
- eh bien, le fait qu'il ne vous dit pas dans les docs que vous POUVEZ le faire, devrait vous dire qu'il n'est pas possible dans la façon dont vous le souhaitez...
InformationsquelleAutor Antara Datta
5

La réponse donnée ci-dessus est correcte et complète. Je veux juste ajouter que pour ceux qui la solution n'a pas fonctionné pour eux qu'ils doivent ajouter le service à des fournisseurs que dans le composant parent et de l'enfant pour s'assurer que vous obtenez un singleton du service, sinon deux instances de service sera créé.
Cette réponse est inspiré par le commentaire de @HeisenBerg dans la réponse précédente.
- cela peut maintenant être résolu avec providedIn: 'root' ajouté à la Injectable décorateur. angulaire.io/guide/...
InformationsquelleAutor Bacem

J'ai changé un peu de Antara Datta la réponse.
J'ai créé un service de l'Abonné

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class Subscriber<T>
{
  protected observable = new Subject<T>();

  public next(item: T)
  {
    this.observable.next(item);
  }

  public subscribe(callback: (item:T)=>void) {
    this.observable.subscribe(callback);
  }
}

Chaque fois que j'ai besoin de deux composants de partager de l'information, j'injecte ce service dans le constructeur qui vous y abonner:

 constructor(protected layoutOptions: Subscriber<Partial<LayoutOptions>>)
 {
    layoutOptions.subscribe(options => this.options = Object.assign({}, this.options, options));
 }

et celui qui la met à jour

constructor(protected router: Router, protected apiService: ApiService, protected layoutOptions: Subscriber<Partial<LayoutOptions>>)
  {
    this.layoutOptions.next({showNavBar: false});
  }

Il me donne un message d'erreur indiquant Ne peut pas trouver le nom de 'LayoutOptions
Le LayoutOptions pourrait être quelque chose que vous êtes à l'aide de vouloir vous abonner et à mettre à jour.

InformationsquelleAutor Raza

Vous devez vous connecter pour publier un commentaire.