0

我正在创建一个提及指令。当用户尝试在 textarea 上插入内容时，我的指令将触发并显示用户列表。保存时，这会将值作为文本返回。

例如：Good morning @alice.Today is @bob 's birthday.

我想像帖子一样显示这个。所以想为特定用户添加超链接。

我的第一次尝试是将提到的用户列表存储在数组中，然后过滤掉，然后动态形成超链接。但这是一个失败，多个用户有问题。

现在我认为最好将文本转换为 Html 并保存为字符串。然后调用[innerHTML]。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 converted: string;
  text: string;
  constructor() {
    this.text = 'Good morning @alice.Today is @bob 's birthday.';
    this.converted = this.textToHtml(this.text);
  }
   textToHtml(text: string) {
    return text.replace(/@([a-z\d_]+)/ig, `<a href="http://localhost:4200/profile/$1">$1</a>`);
  }
}

我有一个与用户相关的个人资料编号的对象

let userList = {
  'alice':100,
  'bob': 101
}

如何修改正则表达式并将带有超链接点的名称返回到配置文件？

例如：

<a [routerLink]="['/profile', ${userId of user}]">${name}</a>
4

1 回答 1

0

这是不可能的，因为像这样，因为routerLink不会被解析。但是，您可以创建一个新Component的来为您工作。最好您还需要创建一个UserService用于获取用户列表并通过用户名获取用户的工作：

@Component({
  selector: 'user-router-link',
  template: `
    <a [routerLink]="'/profile/' + user.id" [innerHtml]="'@' + user.name"></a>
  `
})
export class UserRouterLink {

  @Input()
  public username: string;

  public get user(): User {
      return this._userService.getByUsername(this.username);
  }

  constructor(private _userService: UserService) {}

}

现在您需要找到一种方法让您的父组件具有如下模板：

Good morning <user-router-link username="alice"></user-router-link>. 
Today is <user-router-link username="bob"></user-router-link>'s birthday.
于 2017-08-08T06:59:54.297 回答