在routerLink中设置url字符串

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变量dyamic：

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

Answer 2

好：routerLink = "/{{url}}"

或

最佳：[routerLink] = " '/' + url "

更新：

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

在组件中：

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

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

Answer 3

这就是对我有效的解决方案。上面的所有解决方案都是基于处理我的有效输入url。在处理后，一些字符丢失，一些字符被替换，未转义等。这个解决方案根本不改变url字符串，并在导航过程中使用它。它基于angular github的routerLink源代码。我只留下了在我的特定情况下需要的功能。

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>