web-dev-qa-db-fra.com

Existe-t-il un moyen de nommer un itinéraire dans Angular 7?

Je me demandais s'il y avait un moyen de nommer mes itinéraires dans Angular7 afin que je puisse simplement appeler [routerLink]="myRouteName" au lieu de [routerLink]="/my/route/path".

Si oui, comment puis-je y parvenir?

angularangular-routerangular7
8
RafaelTSCS

Considérant que vous souhaitez configurer les noms de routes pendant que vous créez la configuration de route.

Permet de tirer parti routes' propriété de données pour ajouter des noms aux itinéraires. (Un petit supplément de données dans chaque itinéraire ne devrait pas affecter les performances).

Mais d'abord, créons une classe qui contient une propriété statique pour contenir les noms de route et leurs chemins réels.

export class RouteNames {
  public static routeNamesObject = {}
}

Maintenant, dans votre composant de routage où vous avez défini les itinéraires, disons-le comme:

const routes: Routes = [
  {path: "hello/:id", component: HelloComponent, data: {routeName: "Hello1"}},
  {path: "hello", component: HelloComponent, data: { routeName: "Hello2" }}
]

Juste après cette initialisation de variable, définissez l'accessoire statique de la classe RouteNames

routes.forEach((eachRoute) => {
  RouteNames.routeNamesObject[eachRoute.data.routeName] = eachRoute.path;    // now all route paths are added to this prop
})

Créez une variable publique dans votre composant pour accéder à la classe statique

Comme dans app.component.ts: (Vous n'avez pas besoin d'injection)

public routeNames = RouteNames;

Puis le app.component.html sera quelque chose comme:

<button [routerLink]="routeNames.routeNamesObject['Hello2']">Click to Navigate to Hello</button>
8
xyz
<a [routerLink]="routerLinkVariable"></a>

Donc, cette variable (routerLinkVariable) pourrait être définie dans votre classe et elle devrait avoir une valeur comme ci-dessous

export class myComponent {

     public routerLinkVariable = "/my/route/path"; // the value of the variable is string!
}
6
Mile Mijatovic

Dans votre classe

public routeName = '/customRoute/myExample'

Puis dans votre modèle

[routerLink]="routeName"

Cela devrait tirer cette valeur, je pense que c'est ce que vous demandez. Cela ne fonctionnera que si le customRoute est en fait un nom de route valide que vous avez créé.

3
dince12

Vous pouvez utiliser un fichier constant pour cela afin qu'il puisse également être réutilisé dans d'autres composants.

export const ROUTE_URL = {
    myRouteName: '/my/route/path',
};

Autant que vous en avez.

puis utilisez cette constante sur .TS et l'utiliser dans la vue.

Voir:

<a [routerLink]="routerUrls.myRouteName"></a>

. TS:

public routerUrls= ROUTE_URL;

Même sur votre fichier d'itinéraire

 { path: 'xyz', loadChildren:  ROUTE_URL.myRouteName},
2
Rohit.007