1

在我的 Angular 应用程序中，我遇到了一个场景，我必须在 Facebook 的活动日志中显示用户的活动历史记录。

活动模板可能有不同的类型，例如：

  1. 荷航从订单2569创建子订单10463
  2. XYZ删除子订单1046
  3. ABC评论了第2569号订单

等等。

粗体文本将是一个链接，它将用户导航到用户的相应配置文件或特定的subOrder或Order.

在 TypeScript 文件中，我为 KLM、ABC 或 XYZ 等用户/参与者创建了如下链接：

const tempActorLink = '<a href=/user-profile/' + history.actorId + '/' + history.actorName + '>' + history.actorName + '</a>';

然后我用创建的链接替换{actor}字符串，history如下所示：

history.activity = history.activity.replace('{actor}', tempActorLink);

我在创建Order和subOrder链接时做了同样的事情。

我曾经innerHTML将它添加到 DOM 中，如下所示：

<span innerHTML="{{history.activity}}"></span>

由于使用href了页面重新加载，这是不可取的。

我尝试使用routerLink如下 TypeScript 代码所示的指令：

const tempActorLink = '<a [router-link]=\"[\'/user-profile/' + history.actorId + '/' + history.actorName + '\']\">' + history.actorName + '</a>';

我在创建的 DOM 代码中看不到routerLink指令。

请帮助我使用routerLink指令或其他具有预期效果的方法在 DOM 中动态添加链接。

4

0 回答 0