Question

我不喜欢使用router.navigate，因为它需要在整个应用程序中使用魔法字符串。像

this.router.navigate(['/user', user.id]);

所以我想在它周围创建强类型包装器：

export class NavigatorService {

  constructor(private router: Router) {}

  public user(userId: number): Promise<boolean> {
    return this.router.navigate(['/user', user.id]);
  }
}

当然应该与路由配置保持同步。

困扰我的是模板中的用法：

<a [routerLink]="['/user', user.id]">
</a>

我应该添加返回数组的其他方法吗？

export class NavigatorService {

  ...

  public userArr(userId: number): Array<any> {
    return ['/user', user.id];
  }
}

<a [routerLink]="navigator.userArr(user.id)">
</a>

有什么想法吗？可能有人已经走了这条路吗？

Answer 1

您可以创建自定义routerLink指令，注入您的服务并使用它生成链接以便能够使用它

[myRouterLink]="32"

https://github.com/angular/angular/blob/a006c1418a9f4d44f4046976c0ee2824416aa096/modules/%40angular/router/src/directives/router_link.ts#L82-L128

Answer 2

经过一番思考，我决定在简单的路线上，我想要下一个服务签名：

class NavigatorService {
    user(id: number, matrix: MatrixParams = {}): Navigation { ... }
}

其中MatrixParams是一个简单的对象

interface MatrixParams {
    [index: string]: any
}

和Navigation是扩展数组：

interface Navigation extends Array<any> {
    go(extras?: NavigationExtras): Promise<boolean>;
}

Navigation可以在代码和routerLink指令中使用：

    this.navigator.user(1).go();

    <a [routerLink]="navigator.user(1)">...</a>

为了创建这样的对象，我使用了数组子类，如here所述：

function navigation(router: Router, ...items: any[]): Navigation {
    let arr: Navigation = <Navigation>[...items];

    arr.go = (extras?: NavigationExtras): Promise<boolean> => {
        return router.navigate(arr, extras);
    };

    return arr;
}

所以服务实施将是：

class NavigatorService {
    constructor(private router: Router) { }

    user(id: number, matrix: MatrixParams = {}): Navigation {
        return navigation(this.router, '/user', id, matrix);
    }
}

对于更复杂的路线，可以使用其他导航子类：

class NavigatorService {
    ...

    order(id: number, matrix: MatrixParams = {}): OrderNavigation {
        return orderNavigation(this.router, '/order', id, matrix);
    }
}

interface OrderNavigation extends Navigation {
    items(matrix?: MatrixParams): Navigation;
}

function orderNavigation(router: Router, ...items: any[]): OrderNavigation {
    let arr: OrderNavigation = <OrderNavigation>navigation(router, ...items);

    arr.items = (matrix: MatrixParams = {}): Navigation => {
        return navigation(router, ...arr, 'items', matrix);
    };

    return arr;
}

router.navigate周围强类型的包装器

2 个答案: