¿Cómo paso datos a componentes enrutados angulares?

En una de las plantillas de mis rutas Angular 2 ( FirstComponent ) tengo un botón

primer.componente.html

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

Mi objetivo es lograr:

Haga clic en el botón -> ruta a otro componente conservando los datos y sin usar el otro componente como directiva.

Esto es lo que probé...

1ER ENFOQUE

En la misma vista, estoy almacenando la recopilación de los mismos datos en función de la interacción del usuario.

primer.componente.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
 }
}

Normalmente enrutaría a SecondComponent por

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

eventualmente pasando los datos por

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

mientras que la definición del vínculo con los parámetros sería

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

El problema con este enfoque es que supongo que no puedo pasar datos complejos (por ejemplo, un objeto como property3) in-url;

2º ENFOQUE

Una alternativa sería incluir SecondComponent como directiva en FirstComponent.

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

Sin embargo, quiero enrutar a ese componente, ¡no incluirlo!

3ER ENFOQUE

La solución más viable que veo aquí sería usar un Servicio (por ejemplo, FirstComponentService) para

• almacenar los datos (_firstComponentService.storeData()) en routeWithData() en FirstComponent


• recuperar los datos (_firstComponentService.retrieveData()) en ngOnInit() en SecondComponent

Si bien este enfoque parece perfectamente viable, me pregunto si esta es la forma más fácil/elegante de lograr el objetivo.

En general, me gustaría saber si me estoy perdiendo otros enfoques potenciales para pasar los datos entre componentes, particularmente con la menor cantidad de código posible.

Solución del problema

Angular 7.2.0 introdujo una nueva forma de pasar los datos al navegar entre componentes enrutados:

@Component({
 template: `<a (click)="navigateWithState()">Go</a>`,
})
export class AppComponent {
 constructor(public router: Router) {}
 navigateWithState() {
 this.router.navigateByUrl('/123', { state: { hello: 'world' } });
 }
}

Or:

@Component({
 selector: 'my-app',
 template: `
 <a routerLink="/details" [state]="{ hello: 'world' }">Go</a>`,
})
export class AppComponent {}

Para leer el estado, puede acceder a window.history.statela propiedad una vez finalizada la navegación:

export class PageComponent implements OnInit {
 state$: Observable<object>;
 constructor(public activatedRoute: ActivatedRoute) {}
 ngOnInit() {
 this.state$ = this.activatedRoute.paramMap
.pipe(map(() => window.history.state))
 }
}