时间戳

首页 > 解决方案 > Angular 7：从后端添加路由链接

angular - Angular 7：从后端添加路由链接

问题描述

我正在尝试找到一种方法来将路由链接添加到从后端 API 检索的数据中。我尝试添加<a routerLink="...">...</a>后端数据然后使用bypassSecurityTrustHtml()，但它不起作用。

我想知道我是否必须使用 .html 子模板，或者我是否可以完全从 TypeScript 管理它？

编辑1：这是我从后面收到的数据：

{
   "status":"OK",
   "result":{
      "chmn":[
         {
            "id":267,
            "number":"",
            "hanzi":"\u4e00",
            "simplified":"",
            "mnemonics":"one; <a>\u58f1<\/a> <a>\u7532<\/a>; <a>\u4f96<\/a> <a>\u4fde<\/a> <a>\ud842\udf9b<\/a> <a>\u4ee4<\/a> <a>\u5f10<\/a> <a>\u6b66<\/a> <a>\u6238<\/a> <a>\u81f3<\/a> <a>\u767e<\/a>;",
            "alike":"",
            "mine":false,
            "meaning":"",
            "reference":"",
            "remnant":false
         }
      ]
   }
}

我想要实现的是将空替换<a>\u58f1<\/a>为<a routerLink="/details/\u58f1">\u58f1</a>创建动态路由链接。但是如果我直接把它放在后端响应中，Angular 就不会认为它是一个真正的路由器链接。

编辑 2：感谢 Stefan，这是我使用的解决方案：

  res.result.chmn.forEach(element => {
    element.mnemonics = element.mnemonics.split(/(\p{Script=Hani})+/gu);
  });

并在模板中：

<span *ngFor="let mnemonic of kanji.mnemonics">
    <span *ngIf="mnemonic.length > 1" [innerHTML]="mnemonic | sanitizeHtml"></span>
    <a *ngIf="mnemonic.length == 1" routerLink="/details/{{mnemonic}}">{{mnemonic}}</a>
</span>

标签： angulartypescriptionic-frameworkangular7ionic4

解决方案

您不能将\u58f1, \u4f96... 作为 Url 参数（还）。尝试以对象结构发送动态路由链接，例如：

routes: { link: string, text: string }[] = [
    {
      link: "login", // a valid url string
      text: "\u58f1" // a renderable "CJK UNIFIED IDEOGRAPH" sign
    },
    {
      link: "home",
      text: "\u4f96"
    }
  ]

然后，您可以动态渲染路线，例如：

<div *ngFor="let route of routes">
  <a routerLinkActive="active" 
    routerLink="/{{route.link}}">{{route.text}}</a>
</div>

Stackblitz 示例：https ://stackblitz.com/edit/angular-router-basic-example-e1fpas?file=app%2Fapp.component.ts

推荐阅读