Question

我正在尝试设置类似'user/:id/edit'的URL，但是当我使用[routerLink]="['user/:id/edit', 1]"时，它会生成/user/:id/edit/1。

如果我使用[routerLink]="['user/:id/edit', {id: 1}]"，它将生成/user/:id/edit;id=1

是否有一种无需使用字符串插值就可以将输出作为/users/1/edit的方法？

Answer 1

您可以这样尝试：assert true;

更一般地，您可以像这样放置id参数：

[routerLink]="['/user/', 1, '/edit']"

Answer 2

我相信您的问题是another question of yours.的扩展在这里，您的要求是获取一个数组，该数组根据您要传递的参数正确转换。我的意思是：

假设我们的路由配置为

const routes: Routes = [
  {path: "first/:id1/second/:id2", component: HelloComponent}
]

在[routerLink]中使用它时，您将希望具有以下输入属性：['first', 'param1', 'second', 'param2']。不是这样的：['first/param1/second/param2']。如果这样做，即使将您路由到所需的路径，您的ActivatedRoute内也将没有任何参数（以防您需要从路由器获取参数）。

现在您的任务是为routerLinks创建这样的数组。

让我们创建一个Pipe来做到这一点并提高性能。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'routerArray'
})
export class RouterArrayPipe implements PipeTransform {
    transform(routerPath: string, params: string | number[]): string | number[] {
        // regex to find all the param placeholders in the route path
        let regex = /(\/:[a-zA-Z0-9]*\/?)/g;
        // will be returned as output
        let routerArray = [];
        // contains the output of regex.exec()
        let match = null;
        // index to retrieve the parameters for route from params array
        let paramIndex = 0;
        while (match = regex.exec(routerPath)) {
            // push the first part of the path with param placeholder
            routerArray.push(routerPath.substring(0, match.index))
            // push the param at paramIndex
            routerArray.push(params[paramIndex++]);
            // remove the contents from routerPath which are processed
            routerPath = routerPath.substring(regex.lastIndex);
            // regex is stateful, reset the lastIndex coz routerPath was changed.
            regex.lastIndex = 0;
        }
        // if the recieved route path didn't accept any argumets
        if (routerArray.length === 0) {
            routerArray.push(routerPath)
        }
        return routerArray
    }
}

现在您可以像这样使用管道了：

<button [routerLink]="'first/:id1/second/:id2' | routerArray: ['1', '2']">Click to Navigate</button>

查看Example here...

Answer 3

在组件中，您可以使用Router进行此操作：

进口：

import { ActivatedRoute, Router } from '@angular/router';

constructor(private router: Router){
}

navigate(id){
this.router.navigate(['/user/'+id+'/edit']);
}

角路由：类似/ my /：parameter / path的URL

3 个答案: