Angular 7: добавить маршрутные ссылки из бэкэнда - PullRequest
Новая
       10

Angular 7: добавить маршрутные ссылки из бэкэнда

0 голосов
/ 12 февраля 2019

Я пытаюсь найти способ добавить маршрутную ссылку к данным, полученным из внутреннего 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: Благодаря Стефану, вот решение, которое я использовал: 

  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>

Ответы [ 2 ]

0 голосов
/ 12 февраля 2019

Плохая идея получить целую вкладку якоря из бэкэнда, например <a>\u58f1<\/a>.Из вашего фрагмента ответа я понимаю, что u58f1 - это идентификатор / код. Вы можете просто получить эти идентификаторы из серверной части и использовать их как <a routerLink="/details/{{:id}}">, если это возможно.

0 голосов
/ 12 февраля 2019

Вы не можете иметь \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

...