Угловой маршрут: URL-адрес как / мой /: параметр / путь - PullRequest
Новая
       24

Угловой маршрут: URL-адрес как / мой /: параметр / путь

0 голосов
/ 04 декабря 2018

Я пытаюсь настроить URL как 'user/:id/edit', но когда я использую [routerLink]="['user/:id/edit', 1]", он генерирует /user/:id/edit/1.

Если я использую [routerLink]="['user/:id/edit', {id: 1}]", он генерирует /user/:id/edit;id=1

Есть ли способ получить вывод как /users/1/edit без использования строковой интерполяции?

Ответы [ 3 ]

0 голосов
/ 04 декабря 2018

В компоненте вы можете сделать это с помощью Router:

Импорт: 

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

constructor(private router: Router){
}

navigate(id){
this.router.navigate(['/user/'+id+'/edit']);
}
0 голосов
/ 04 декабря 2018

Я считаю, что этот ваш вопрос является расширением другой ваш вопрос. Здесь вы должны получить массив, который правильно переведен относительно параметров, которые вы хотите передать.Я имею в виду следующее:

Допустим, у нас есть конфигурация маршрута как 

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

При использовании этого в [routerLink] вы захотите, чтобы свойство input было похоже на: ['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>

См. Пример здесь ...

0 голосов
/ 04 декабря 2018

Вы можете попробовать так: [routerLink]="['/user/', 1, '/edit']"

В более общем смысле вы можете указать свой параметр id следующим образом:

[routerLink]="['/user/', <your param 1>, '/edit/', <your param 2>]"

...