有没有办法在 Angular 7 中命名一条路线？

Question

我想知道是否有一种方法可以在 Angular 7 中命名我的路线，这样我就可以调用 [routerLink]="myRouteName" 而不是 [routerLink]="/my/route/path".

如果可以，我该如何实现？

Answer 1

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

所以这个变量 (routerLinkVariable) 可以在你的 class 中定义，它的值应该如下所示

export class myComponent {

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

Answer 2

在你的class

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

考虑到您要在创建路由配置时配置路由名称。

让我们利用 routes' 数据属性为路线添加名称。（每条路线中的少量额外数据不应影响任何性能）。

但首先，让我们创建一个 class，其中包含一个静态属性，用于保存路由名称及其实际路径。

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 class 的静态属性

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

在您的组件中创建一个 public 变量以访问静态 class

喜欢app.component.ts：（你不需要注射）

public routeNames = RouteNames;

那么 app.component.html 将类似于：

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

Answer 5

我设法做到了这一点（如果有人能告诉我如何删除数组循环，奖励）：

custom-route.interface.ts -- 这是给我们的路由对象添加名称


export interface ICustomRoute extends Route {

  name?: string;

}

在 routing.module.ts（或您存储路线的任何地方）：

const routes: ICustomRoute[] = [
  { path: 'some/random/page1', component: TestComponent, name: 'page1'  },
  { path: 'some/random/page2', component: Test2Component, name: 'page2'  },
  { path: 'page3', component: Test3Component, name: 'page3'  },
];

现在名称正在传递到您的路由模块中，所以现在您必须捕获名称并处理它。你可以通过多种方式做到这一点，我最终使用了一个指令（我看到@Safron 也提到了一个管道）

命名-routerlink.directive.ts

@Directive({
  selector: 'a[namedRouterLink]'
})
export class NamedRouterLinkDirective extends RouterLinkWithHref{
  @Input('namedRouterLink')

  set namedRouterLink(val: any) {
    const selectedRoute = this.myRoute.config.filter( x => x['name'] == val)[0];
    this.routerLink = "/" + selectedRoute['path']
  };

  constructor(router: Router, route: ActivatedRoute, locationStrategy: LocationStrategy, private myRoute: Router){
    super(router, route, locationStrategy)
  }

}

然后显然这样使用：

 <a namedRouterLink="page1">Page 1</a>

管道版本：

@Pipe({name: 'getRoute' })
export class RoutePipe implements PipeTransform {

  constructor(private router: Router){}

  transform(routeName: string): string {
    const selectedRoute = this.router.config.filter( x => x['name'] == routeName)[0];
    return "/" + selectedRoute['path']
  }

}

管道示例：

 <a namedRouterLink="{{ 'page1' | getRoute }}">Page 1</a>

有没有办法在 Angular 7 中命名一条路线？

Is there a way to name a route in Angular 7?

angular

angular-router

angular7