Come passare il parametro tra stati non in un URL?

Question

Mi chiedo come posso passare i parametri, che non saranno visibili nell'URL?

fin d'ora che ho:

{path: '/editUser/:userId', name: 'Edit User', component: UserEditComponent} 

E quando ci si dirige verso questo punto di vista del genere:

<a href="#" [routerLink]="['Edit User',{userId: id}]" 

Il userId verranno visualizzati nell'URL.

Come posso impostarlo, in modo che non sia visibile nell'URL?

Grazie

Answer 1

Buona domanda!

Non so esattamente come farlo, ma sì, so che si alterna la stessa cosa pubblicando così la risposta può aiutare qualcuno.

Fondamentalmente ci sono due opzioni (fino a mia conoscenza) per inviare i dati tramite il routing

• RouteParams (come quello usato in questione)
• dati (proprietà al momento del routing)

RouteParams

Ora, quando abbiamo inviare i dati utilizzando RouteParams dobbiamo definire nel modo similer come questo:

{path: '/editUser/:userId', name: 'Edit User', component: UserEditComponent} 

<a href="#" [routerLink]="['Edit User',{userId: id}]" 

Utilizzando questo metodo inviamo i dati normalmente, ma tutti i dati è visibile nell'URL

dati

quando non vogliamo mostrare i dati nel percorso URL che dobbiamo inviare i dati tramite routing utilizzando la proprietà data di @RouteConfig annotation fornita da angualr2. utilizzando questa proprietà possiamo inviare dati aggiuntivi ai componenti al momento della configurazione del percorso senza mostrarli nell'URL. ecco un esempio di questa proprietà.

@RouteConfig([ 
    {path: '/product/:id', component: ProductDetailComponentParam, 
    as: 'ProductDetail', data: {isProd: true}}]) 

export class ProductDetailComponentParam { 
    productID: string; 
    constructor(params: RouteParams, data: RouteData) { 
     this.productID = params.get('id'); 

     console.log('Is this prod environment', data.get('isProd')); 
    } 
} 

utilizzando questo è possibile inviare dati tramite il routing senza mostrare nell'URL. esempio funzionante di stesso: http://plnkr.co/edit/N5IzUH0pc3nN1O7iQZkD?p=preview]

per ulteriori informazioni leggere questo awesome article