Jak przekazać parametr routerLink, który znajduje się gdzieś w adresie URL?

208

Wiem, że mogę przekazać parametr do routerLinktras takich jak

/user/:id

przez pisanie

[routerLink]="['/user', user.id]"

ale co z trasami takimi jak ta:

/user/:id/details

Czy istnieje sposób na ustawienie tego parametru, czy powinienem rozważyć inny schemat adresów URL?

angular angular2-routing angular2-router3 Thorsten Westheider
źródło

Odpowiedzi:

347

W twoim konkretnym przykładzie wykonasz następujące czynności routerLink:

[routerLink]="['user', user.id, 'details']"

Aby to zrobić w kontrolerze, możesz wstrzyknąć Routeri użyć:

router.navigate(['user', user.id, 'details']);

Więcej informacji w dokumentacji Angular Docs Array Link Array w sekcji Routing & Navigation

Wojciech Kwiatek
źródło
czy możesz podać link, na którym mogę znaleźć więcej informacji na ten temat?
refaktor
4
@CleanCrispCode Więcej informacji na ten temat można znaleźć w dokumentacji Angulara
Wojciech Kwiatek
Co ze <button mat-button routerLink="...">View user</button>składnią?
Stephane
33

Być może jest to bardzo późna odpowiedź, ale jeśli chcesz nawigować po innej stronie za pomocą parametrów, możesz, 

[routerLink]="['/user', user.id, 'details']"

nie należy również zapominać o konfiguracji routingu, takiej jak,

 [path: 'user/:id/details', component:userComponent, pathMatch: 'full']
Rıdvan
źródło
11

Najpierw skonfiguruj w tabeli:

const routes: Routes = [  
{
  path: 'class/:id/enrollment/:guid',
  component: ClassEnrollmentComponent
 }
];

teraz w kodzie skryptu typu:

this.router.navigate([`class/${classId}/enrollment/${4545455}`]);

odbierać parametry w innym elemencie

 this.activatedRoute.params.subscribe(params => {
  let id = params['id'];
  let guid = params['guid'];

  console.log(`${id},${guid}`);
  });
Rejwanul Reja
źródło
0

Istnieje wiele sposobów osiągnięcia tego celu.

  • Poprzez dyrektywę [routerLink]
  • Metoda navigate (Array) klasy Router
  • Metoda navigateByUrl (string), która pobiera ciąg znaków i zwraca obietnicę

Atrybut routerLink wymaga zaimportowania modułu routing do modułu funkcji na wypadek, gdybyś leniwie załadował moduł funkcji lub po prostu zaimportował moduł routingu aplikacji, jeśli nie zostanie on automatycznie dodany do tablicy importu AppModule.

  • RouterLink
<a [routerLink]="['/user', user.id]">John Doe</a>
<a routerLink="urlString">John Doe</a> // urlString is computed in your component
  • Nawigować
// Inject Router into your component
// Inject ActivatedRoute into your component. This will allow the route to be done related to the current url
this._router.navigate(['user',user.id], {relativeTo: this._activatedRoute})
  • NavigateByUrl
this._router.navigateByUrl(urlString).then((bool) => {}).catch()
makinyelure
źródło