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

Question

我想知道是否有办法在Angular7中命名我的路线,所以我可以调用[routerLink]="myRouteName"而不是[ routerLink]="/my/route/path".

如果是这样,我怎么能做到这一点？

Answer 1

考虑在创建路由配置时要配置路由名称.

让我们利用routes'data属性为路由添加名称.(每条路线中的一小部分额外数据不应影响任何性能).

但首先,让我们创建一个包含静态属性的类来保存路由名称及其实际路径.

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类的静态prop

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

我设法这样做（如果有人能告诉我如何删除数组循环，那就太好了）：

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>

Answer 3

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

所以这个变量(routerLinkVariable)可以在你的类中定义,它应该有一个像下面这样的值

export class myComponent {

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