Aggiungere e recuperare parametri custom in una route di Angular

di Stefano Mostarda, in HTML5, Angular,

Quando definiamo il routing di un'applicazione Angular, generalmente per ogni route specifichiamo l'url e il component che deve rispondere all'url. Oltre a queste informazioni, possiamo specificarne anche altre tra cui un oggetto custom che può contenere qualunque proprietà e che viene passato in input al component quando viene caricato dalla navigazione.
Il primo step per eseguire questa operazione consiste nel valorizzare la proprietà data durante la specifiche del routing come mostrato in questo esempio.

const routes: Routes = [
  { path: '', component: HomeComponent, data: { title: 'titolo' } },
];

Il secondo step consiste nell'iniettare il servizio ActivatedRoute nel costruttore del component e sfruttarne la proprietà data per accedere all'oggetto impostato nel routing. Questa proprietà non torna l'oggetto, bensì un observable che torna l'oggetto quindi dobbiamo usare il metodo subscribe per recuperare i dati.

export class HomeComponent implements OnInit {
  title: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sessionId = this.route
      .data
      .subscribe(d => this.title = d.title);
  }
}

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi