角7:从后端添加路由链接

Question

我正在设法将路由链接添加到从后端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 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>

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/ like，您可以从后端获取这些id，并在可能的情况下像<a routerLink="/details/{{:id}}">一样使用它。