Angular2-mentions - 我如何将 URL link 添加到 angular2-mentions in angular 4 中提到的用户
Angular2-mentions - How I can add URL link to mentioned user from angular2-mentions in angular 4
如何使用 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>
对此有何建议?
结局我是用 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
}
}
如何使用 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>
对此有何建议?
结局我是用 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
}
}