установить строку URL в routerLink

Question

У меня в компоненте есть общедоступные переменные url и строка заголовка:

const url: string = 'locator;name=Test';
const title: string = 'Test';

И я хочу использовать его в своем шаблоне для ссылок вроде этого:

<a mat-button [routerLink]="'/' + url">{{title}}</a>

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

<a mat-button routerLink="'/' + url">{{title}}</a>

Как я могу решить эту проблему?Я получаю эти ссылки от службы, и я не могу ее изменить.На данный момент я решаю эту проблему следующим образом, но у меня есть проблема, потому что веб-страница перезагружается каждый раз, когда я нажимаю эти ссылки:

<a mat-button [href]="'/' + url">{{title}}</a>

Answer 1

Это решение, которое работает для меня.Все вышеупомянутое решение было основано на обработке моего действительного URL-адреса ввода.После обработки некоторые символы отсутствовали, некоторые были заменены, не экранированы и т. Д. Это решение вообще не изменяет строку URL и использует ее во время навигации.Это основано на источнике routerLink от углового github.Я оставил только функции, которые мне нужны в моем конкретном случае.

import { Attribute, Directive, ElementRef, HostBinding, HostListener, Input, OnChanges, OnDestroy, Renderer2, isDevMode } from '@angular/core';
import { LocationStrategy } from '@angular/common';
import { Router, ActivatedRoute, RouterEvent, NavigationEnd, UrlTree } from '@angular/router';
import { Subscription } from 'rxjs';

@Directive({ selector: 'a[routerUrlLink]' })
export class RouterUrlLinkWithHref implements OnChanges, OnDestroy {

    @HostBinding('attr.target') @Input() target: string;
    @Input() skipLocationChange: boolean;
    @Input() replaceUrl: boolean;

    private url: string;
    private subscription: Subscription;
    private preserve: boolean;

    // the url displayed on the anchor element.
    @HostBinding() href: string;

    constructor(
        private router: Router,
        private locationStrategy: LocationStrategy) {
        this.subscription = router.events.subscribe((s: RouterEvent) => {
            if (s instanceof NavigationEnd) {
                this.updateTargetUrlAndHref();
            }
        });
    }

    @Input()
    set routerUrlLink(url: string | UrlTree) {
        if (url instanceof UrlTree) {
            this.url = url.toString();
        } else {
            this.url = url;
        }
    }

    @Input()
    set preserveQueryParams(value: boolean) {
        if (isDevMode() && <any>console && <any>console.warn) {
            console.warn('preserveQueryParams is deprecated, use queryParamsHandling instead.');
        }
        this.preserve = value;
    }

    ngOnChanges(changes: {}): any { this.updateTargetUrlAndHref(); }
    ngOnDestroy(): any { this.subscription.unsubscribe(); }

    @HostListener('click', ['$event.button', '$event.ctrlKey', '$event.metaKey', '$event.shiftKey'])
    onClick(button: number, ctrlKey: boolean, metaKey: boolean, shiftKey: boolean): boolean {
        if (button !== 0 || ctrlKey || metaKey || shiftKey) {
            return true;
        }

        if (typeof this.target === 'string' && this.target != '_self') {
            return true;
        }

        const extras = {
            skipLocationChange: attrBoolValue(this.skipLocationChange),
            replaceUrl: attrBoolValue(this.replaceUrl),
        };
        this.router.navigateByUrl(this.url, extras);
        return false;
    }

    private updateTargetUrlAndHref(): void {
        this.href = this.locationStrategy.prepareExternalUrl(this.url);
    }

}

function attrBoolValue(s: any): boolean {
    return s === '' || !!s;
}

Как его использовать.Импортируйте в свой модуль, и в шаблоне используйте его так:

<a mat-button [routerUrlLink]="'/' + urlStringOrUrlTree">Link Label</a>

Answer 2

хорошо: routerLink = "/{{url}}"

или

лучше: [routerLink] = " '/' + url "

обновление:

[routerLink]="[" '/' + getUrl(url) ", {queryParams: {name: title}}]

inкомпонент:

const url: string = 'locator;name=Test';
const title: string = 'Test';

getUrl(url:string):string {
    let res = url.split(";");
    return res[0];
}

Answer 3

попробуйте ниже синтаксис сделать его URL переменной dyamic:

[routerLink]="['/', url]"

Answer 4

Вы можете попробовать этот синтаксис:

<a routerLink="/{{url}}"></a>

Я имел успех с этим в прошлом.Будет работать и в *ngFor циклах.