En passant, entre deux composants (pages) dans Angulaire 2

Je suis en utilisant Angulaire 2 (Tapuscrit)

J'ai deux composants (en fait ils sont deux pages de trop). Ils ne sont PAS en relation parent-enfant.

Je veux passer d'une valeur à la deuxième composante(page) quand je clique sur le lien dans le premier composant(page).

Je sais "paramètres d'URL" chemin à travers le routeur. Mais je ne veux pas afficher ce paramètre dans le lien. Est-il un autre moyen?

Merci!

Vous pouvez utiliser un service, qui est une voie commune pour partager des données entre les composants.
Merci beaucoup!

OriginalL'auteur Hongbo Miao | 2016-01-23

  1. 14

    La manière canonique est d'établir un injectable service et injecter le service dans tout les composants qui ont besoin de données. Depuis que le service est un singleton, les composants d'accéder aux mêmes données. Il ne devrait pas qu'ils sont sur des pages différentes. Plunker ici.

    Edit: Voici un plus impliqués exemple qui montre deux voies de communication entre les composants en vous abonnant à un eventEmitter sur un service: Plunker

    import {Component, Injectable} from 'angular2/core'

//your shared service 
//provide reference in parent component or bootstrap 
@Injectable()
export class myService {
  sharedData:string = "String from myService"
}

@Component({
  selector: 'page1',
  providers: [],
  template: `
    <div>
      <b>Component Page1 - shared data:</b> {{SharedData}}
    </div>
  `,
  directives: [],
})
export class Page1 {
  constructor(aService: myService) {
    this.SharedData = aService.sharedData
  }
}

@Component({
  selector: 'page2',
  providers: [],
  template: `
    <div>
      <b>Component Page2 - shared data:</b> {{SharedData}}
    </div>
  `,
  directives: [],
})
export class Page2 {
  constructor(aService: myService) {
    this.SharedData = aService.sharedData
  }
}
    Merci beaucoup!! Il fonctionne!
    le code ci-dessus ne fonctionnera pas. Depuis Page1 et Page2 à la fois "fournir" un service myService, ils ont chacun leur propre instance du service. (MarkM, les services ne sont pas nécessairement des singletons dans Angulaire 2 -- cela dépend d'où vous les fournir.) Le Plunker est correct, mais, depuis myService est fourni dans le fichier d'amorce/racine de la composante, d'où la Page1 et Page2 obtenir la même instance.
    merci de me laisser savoir. J'ai eu l'idée de votre et de sa réponse. Je pense que j'ai rencontré le problème que vous avez mentionné, les différentes instances. Depuis que j'ai seulement besoin de partager une chaîne, donc j'ai finalement utiliser une chaîne statique dans un service.
    Je ne recommanderais pas une chaîne statique pour résoudre votre problème. Tout ce que vous devez faire est de mettre un seul providers: [myService] ligne dans certains composant qui est au-dessus des deux composants qui ont besoin de partager des données. De cette façon, ils vont tous les deux obtiennent le même/à instance unique. Si votre application ne nécessite qu'une seule instance de ce service, le mettre à la racine du composant ou de l'utilisation de la méthode du bootstrap comme le plunker montre.
    Je crois que j'ai quelques après la lecture de certains blogs et de votre réponse, je vais le changer à l'aide de fournisseurs de ces jours quand j'aurais le temps. Merci!!

    OriginalL'auteur Mark Meyer

  2. 6

    Merci MarkM!
    Il fonctionne, mais il a été difficile pour moi parce que j'ai tout, dans différents fichiers et au cours de la dernière angular2 angulaire à l'aide de la cli... j'ai Donc expliquer ici:

    Tout d'abord:
    Vous devez créer un fichier avec la classe que vous souhaitez partager avec les autres composants: de données.service.ts et de le rendre "@Injectable":

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

@Injectable()
export class myService {
  public sharedData:string;

  constructor(){
    this.sharedData = "String from myService";
  }

  setData (data) {
    this.sharedData = data;
  }
  getData () {
    return this.sharedData;
  }
}

    Assurez-vous de définir la classe créée (myService) sur les "prestataires" qu'une seule fois sur le app.le module.ts fichier et importer les injectables fichier: de données.service.ts:

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { routing, appRoutingProviders } from './app.routing';
import { AppComponent } from './app.component';
import { AppContent } from './components/content.component';
import { AppInsertContent } from './components/insert.component';
import { myService } from './services/data.service';

@NgModule({
  declarations: [
    AppComponent,
    AppContent,
    AppInsertContent,
  ],
  imports: [
    BrowserModule,
    routing
  ],
  providers: [appRoutingProviders, myService],
  bootstrap: [AppComponent]
})
export class AppModule { }

    Où vous souhaitez utiliser votre classe partagée utiliser le constructeur pour créer un objet de la classe (cet objet sera unique pour vos composants, grâce à la @Injectable décorateur). N'oubliez pas de l'importer sur chaque fichier que vous l'utiliser!...

    Dans mon cas, ce point de vue des ensembles de données de l'objet avec une saisie de texte: d'entrée.composante.ts

    import { Component } from '@angular/core';
import { myService } from '../services/data.service';

@Component({
  selector: 'insert-content',
  template: `
   <input id="textbox" #textbox type="text">
   <button (click)="this._myService.setData(textbox.value); SharedData = textbox.value;">SAVE</button>
   Object data: {{SharedData}}

    <div class="full-button">
      <a routerLink="/" routerLinkActive="active">BACK</a>
    </div>
  `
})

export class AppInsertContent {
  SharedData: string;
  constructor (private _myService: myService){
    console.log(this._myService.getData());
  }
}

    Et de ce point de vue, je viens de voir les données qui a été mis sur l'objet: de contenu.composante.ts

    import { Component } from '@angular/core';
import { myService } from '../services/data.service';

@Component({
  selector: 'app-content',
  template: `
  <div style="float:left; clear:both;"> 
    {{_myService.getData()}} 
  </div>

  <div class="full-button">
    <a routerLink="/insert" routerLinkActive="active">INSERT</a>
  </div>
  `
})
export class AppContent {
  constructor (private _myService: myService){
    console.log(this._myService.getData());
  }
}

    J'espère que cette info est utile!

    Mec, tu m'as sauvé la vie! Simplement en disant: "assurez-vous de définir la classe créée (myService) sur les "prestataires" qu'une seule fois sur l'application.le module.ts". Merci beaucoup, je n'arrivais pas à enregistrer mes données dans le service, car je l'ai mis sur chaque composant au lieu de seulement en application.le module.ts !

    OriginalL'auteur gtamborero