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>\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 ...作为网址参数（尚未）。尝试在对象结构中发送动态路由链接，例如：

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 /代码。您可以简单地从后端获取这些ID并像 <a routerLink="/details/{{:id}}">（如果可能）。

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

2 个答案: