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?

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


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']

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}`);
  });

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()
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.