In einer der Vorlagen meiner Angular 2-Routen FirstComponent) Ich habe eine Schaltfläche

first.component.html

<div class="button" click="routeWithData()">Pass data and route</div>

MyTo ist zu erreichen:

Klicken Sie auf die Schaltfläche -> Weiterleiten an eine andere Komponente, während die Daten erhalten bleiben und die andere Komponente nicht als Direktive verwendet wird.

Das ist, was ich versucht habe ...

1. ANFAHRT

In der gleichen Ansicht speichert ich das Sammeln der gleichen Daten basierend auf der Benutzerinteraktion.

first.component.ts

export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}

Normalerweise würde ich Route zu SecondComponent durc

 this._router.navigate(['SecondComponent']);

Eventuelles Weitergeben der Daten an

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

wenn die Definition der Verknüpfung mit Parametern @ wä

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent} 
)]

Das Problem mit diesem Ansatz ist, dass ich denke,Ich kann keine komplexen Daten übergeben (z. B. einObjek like property3) in-url;

2. ANFAHRT

Eine Alternative wäre, SecondComponent als @ aufzunehmedirektive in FirstComponent.

  <SecondComponent [p3]="property3"></SecondComponent>

Wie auch immer ich willRout zu dieser Komponente, nicht einschließen!

3. ANFAHRT

Die beste Lösung, die ich hier sehe, wäre die Verwendung einesBedienun (z. B. FirstComponentService) bis

Geschäf die Daten (_firstComponentService.storeData ()) auf routeWithData () in FirstComponentabrufe die Daten (_firstComponentService.retrieveData ()) inngOnInit () im SecondComponent

Während dieser Ansatz durchaus sinnvoll erscheint, frage ich mich, ob dies der einfachste / eleganteste Weg ist, um das Ziel zu erreichen.

In der Regel würde ich gerne wissen, ob ich andere vermissePotential Ansätze, um die Daten zwischen Komponenten zu übertragen, insbesonderemit der weniger möglichen Menge an Code