Question

我正在创建一个提示指令。当用户尝试在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>

Answer 1

这是不可能的，因为这样，因为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.

如何使用正则表达式替换键值以提及链接角度4？

app.component.ts

1 个答案: