Como passo dados para componentes roteados angulares?
Em um dos meus modelos de rotas Angular 2 (FirstComponent) Eu tenho um botão
first.component.html
<div class="button" click="routeWithData()">Pass data and route</div>
Minhasobjetivo é conseguir:
Clique no botão -> rotear para outro componente enquanto preserva os dados e sem usar o outro componente como diretiva.
Isto é o que eu tentei ...
1ª ABORDAGEM
Na mesma visão, estou armazenando a coleta dos mesmos dados com base na interação do usuário.
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
}
}
Normalmente eu encaminharia paraSecondComponent por
this._router.navigate(['SecondComponent']);
eventualmente passando os dados por
this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);
Considerando que a definição da ligação com os parâmetros seria
@RouteConfig([
// ...
{ path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent}
)]
O problema dessa abordagem é que eu achoNão consigo passar dados complexos (por exemplo, umobjeto como property3) in-url;
2ª ABORDAGEM
Uma alternativa seria incluir o SecondComponent comodiretiva no FirstComponent.
<SecondComponent [p3]="property3"></SecondComponent>
No entanto eu querorota para esse componente, não o inclua!
3ª ABORDAGEM
A solução mais viável que vejo aqui seria usar umServiço (por exemplo, FirstComponentService) para
loja os dados (_firstComponentService.storeData ()) em routeWithData () em FirstComponentrecuperar os dados (_firstComponentService.retrieveData ()) emngOnInit () noSecondComponentEmbora essa abordagem pareça perfeitamente viável, pergunto-me se essa é a maneira mais fácil / elegante de atingir a meta.
Em geral, eu gostaria de saber se estou sentindo falta de outraabordagens potenciais para passar os dados entre componentes, principalmentecom a menor quantidade possível de código