Question

我想知道是否有一种方法可以在Angular7中命名我的路线，以便我可以只调用[routerLink]="myRouteName"而不是[routerLink]="/my/route/path"。

如果是这样，我该如何实现？

Answer 1

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

让我们利用remove_filter("comment_text",array("CLD_Comments_Hooks","comments_like_dislike"),200,2);数据属性为路由添加名称。（每条路径中的少量额外数据都不会影响性能）。

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

routes'

现在在您的路由组件中定义了路由的地方，让我们像这样：

export class RouteNames {
  public static routeNamesObject = {}
}

仅在此变量初始化之后设置RouteNames类的静态属性

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

在组件中创建一个公共变量以访问静态类

就像app.component.ts ：（您不需要注入）

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

然后public routeNames = RouteNames;类似于：

app.component.html

Answer 2

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

因此，可以在您的类中定义此变量（routerLinkVariable），并且其值应如下所示

export class myComponent {

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

Answer 3

在你的班上

public routeName = '/customRoute/myExample'

然后在您的模板中

[routerLink]="routeName"

我认为这正是您所要的，它可以拉动这一价值。仅当customRoute实际上是您创建的有效路线名称时，此功能才起作用。

Answer 4

我设法做到了这一点（如果有人可以告诉我如何删除Array循环，可以这样做）：

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也提到了管道）

named-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 5

您可以为此使用常量文件，以便它也可以在其他组件中重用。

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},

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

5 个答案: