Есть ли способ назвать маршрут в Angular 7?

Question

Мне было интересно, есть ли способ назвать мои маршруты в Angular7, чтобы я мог просто позвонить [routerLink]="myRouteName" вместо [routerLink]="/my/route/path".

Если так, как я могу добиться этого?

Answer 1

Учитывая, что вы хотите настроить имена маршрутов при создании конфигурации маршрута.

Позволяет использовать свойство данных routes' для добавления имен в маршруты.(Небольшие дополнительные данные в каждом маршруте не должны влиять на производительность).

Но сначала давайте создадим класс, который содержит статическое свойство для хранения имен маршрутов и их фактических путей.

export class RouteNames {
  public static routeNamesObject = {}
}

Теперь в вашем компоненте маршрутизации, где вы определили маршруты, давайте сделаем так:

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

Сразу после инициализации этой переменной установите статическую опору класса RouteNames

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

Сделайте общедоступнымпеременная в вашем компоненте для доступа к статическому классу

Как в app.component.ts: (вам не нужно внедрять)

public routeNames = RouteNames;

Тогда app.component.html будет выглядеть примерно так:

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

Answer 2

В вашем классе

public routeName = '/customRoute/myExample'

Затем в вашем шаблоне

[routerLink]="routeName"

Это должно вывести это значение, я думаю, это то, что вы просите.Это будет работать только в том случае, если customRoute на самом деле является правильным названием маршрута, который вы указали.

Answer 3

Для этого можно использовать константный файл, чтобы его можно было повторно использовать и в других компонентах.

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

Столько, сколько у вас есть.

, затем используйте эту константу на .TSи используйте его в представлении.

Представление:

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

.TS:

public routerUrls= ROUTE_URL;

Даже в вашем файле маршрута

 { path: 'xyz', loadChildren:  ROUTE_URL.myRouteName},

Answer 4

<a [routerLink]="routerLinkVariable"></a>

Таким образом, эта переменная (routerLinkVariable) может быть определена внутри вашего класса, и она должна иметь значение, как показано ниже

export class myComponent {

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