2017-07-18 1 views
0

Je souhaite naviguer d'un composant vers un autre composant et des données vers celui-ci.Angulaire naviguer vers le composant et lier ses données

Voici le code:

this.router.navigate(['some-component', { name: 'Some Name' }]); 

En SomeComponent J'Attraper params itinéraire comme celui-ci:

this.route.params.subscribe(params => { 
    //assign it to some component member, like 
    this.name = (JSON.parse(params))['name']; 
}); 

Cela fonctionne, mais il ne me donne pas la confiance, après page est naviguées Vue SomeComponent, l'URL est mauvaise et ne conserve pas l'état après le rechargement de la page.

Je souhaite éviter les paramètres de route.

Quelle serait la bonne façon de naviguer vers SomeComponent et de lui envoyer la valeur qui sera utilisée à l'intérieur et liée à this.name par exemple.

Ces deux composants ne sont pas en relation enfant/parent.

+0

Que voulez-vous dire par "l'URL est mauvaise"? À quoi ressemble l'URL? –

+0

Ceci est une chose secondaire, look url est moins important. Je pense que je suis à la recherche d'une chose assez simple. Accédez au composant et définissez des données sur ses propriétés publiques. – eomeroff

+0

Si vous souhaitez partager des données entre des composants, car le service partagé est le scénario le plus courant où il n'y a pas de relation parent-enfant: https://angular.io/guide/component-interaction#parent-and-children-communicate- via-a-service Vous auriez juste besoin d'utiliser (par exemple) 'BehaviorSubject' au lieu de' Subject'. – Alex

Répondre

1

L'espace peut-il être converti en% 20?
Si tel est le codage d'URL par défaut.
Vérifiez this sur.
Syntactically ce que vous avez semble coïncider avec ce que j'ai appris de here.
Peut-être que vous avez besoin de URL Encode?

encodeURI('Some Name') 
+0

Y at-il un moyen d'éviter les paramètres d'itinéraire. Et si j'avais besoin d'envoyer des objets entiers. – eomeroff

+1

Vous avez quelques options. Envoyer l'ID et utiliser le service pour rechercher les données de votre modèle de domaine. Ou stocker l'objet dans un cookie et le récupérer à nouveau. Mais si le navigateur du client a désactivé les cookies, il peut rompre cette approche. Il y a aussi LocalStorage. Bien qu'il y ait un plafond sur le montant que vous pouvez stocker. Google "localstorage size limit" LocalStorage et SessionStorage peuvent utiliser jusqu'à 10 Mo de stockage, mais le nombre est en fait la somme des deux. Pour IndexedDB, vous pouvez utiliser jusqu'à 50 Mo sur le bureau, 5 Mo sur mobile gratuitement. Cependant, l'utilisateur peut autoriser la suppression de la limite en accordant la permission – JGFMK

+0

https://stackoverflow.com/a/45166499/495157 J'ai donné une solution de cookie ici par l'intermédiaire de – JGFMK