Angular7: 从后端添加路由链接

Question

我正在尝试找到一种方法来将路由 link 添加到从后端 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 routerLink="/details/\u58f1">\u58f1</a> 替换空 <a>\u58f1<\/a> 以创建动态路由 link。但如果我直接把它放在后端响应中，Angular 不会将其视为真正的路由器 link。

编辑 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>

Answer 1

您不能将 \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

Answer 2

像 <a>\u58f1<\/a> 这样从后端接收整个锚标签是个坏主意。我从您的响应片段 u58f1 中了解到的是一个 id/code。您可以简单地从后端获取这些 ID 并像这样使用它 <a routerLink="/details/{{:id}}"> 如果可能的话。

Angular7: 从后端添加路由链接

Angular 7: add routing links from backend

typescript

ionic-framework

angular

ionic4

angular7