Angular2-mentions - 如何从 Angular 4 中的 angular2-mentions 添加 URL 链接到提到的用户答案

【问题标题】：Angular2-mentions - How I can add URL link to mentioned user from angular2-mentions in angular 4Angular2-mentions - 如何从 Angular 4 中的 angular2-mentions 添加 URL 链接到提到的用户
【发布时间】：2019-10-20 01:17:19
【问题描述】：

如何使用 angular2-mentions 将 URL RouterLink 添加到 @mention 用户。

我的代码是：

<div class="col-sm-12">
    <input type="text" [mention]="contactNames" [mentionConfig]="{triggerChar:'@',maxItems:10}" class="form-control input-underline input-lg baselg" id=""  maxlength="100" placeholder="Enter a conversation title(Max 100 characters)" [ngModelOptions]="{standalone: true}" [(ngModel)]="postText"> 
</div>

如何添加这个：

<a [routerLink]="['/URL']" [queryParams]="{id:post?.userId}">{{contactNames}}</a>

对此有何建议？

【问题讨论】：

标签： javascript angularjs angular angular5

【解决方案1】：

最后，我使用 Pipe 完成了。

HTML：

<h4 class="post-sub-heading" [innerHTML]="post.shrtMessage | UserLink : {users: post.mentionedUsers, path: '/dentistpublicprofile'} | GeneralLink"> </h4>

<input type="text" [mention]="contactNames" [mentionConfig]="{triggerChar:'@',maxItems:10, labelKey:'name',format:'[@]'}" class="form-control input-underline input-lg baselg" id=""  maxlength="100" placeholder="Enter a conversation title(Max 100 characters)" [ngModelOptions]="{standalone: true}" [(ngModel)]="postText">

管道：

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

@Pipe({
    name: 'UserLink'
})
export class UserLinkPipe implements PipeTransform {

    transform(value: any, args: { path: string, users: { name: string, id: string }[] }): any {
        args.users.forEach(mentionedUser => {
            const mentionedName = '@' + mentionedUser.name;
            const regx = new RegExp(mentionedName, 'g')
            value = value.replace(regx, (url: string) => {
                return `<a href="${args.path}?id=${mentionedUser.id}">${mentionedName}</a>`;
            })
        })
        return value
    }
}

【讨论】：