Как динамически добавлять queryParams к динамически создаваемой ссылке в Angular 7?

Question

Уже есть вопрос здесь относительно него, но у меня это не сработало.

Следующий фрагмент кода создает ссылки в моем приложении Angular 7.

---

КОМПОНЕНТ

...

this.links = [
  ...
  {
    title: 'client-management.title',
    routerLink: '/client/list',
    param: [
      {
        name: 'page',
        value: '0'
      }
    ],
    roles: [UserRoles.FP_ADMIN],
    display: false
  },
  {
    title: 'client-management.new',
    routerLink: '/client/add',
    roles: [UserRoles.FP_ADMIN],
    display: false
  }
];

...

---

HTML

...

<li class="nav-item" *ngFor="let link of links">
    <a class="nav-link text-white p-2" *ngIf="link.display" routerLink="{{link.routerLink}}" translate>{{link.title}}</a>
</li>

...

Теперь у меня есть требование добавить queryParams динамически.

Следующий фрагменткод не работает

<li class="nav-item" *ngFor="let link of links">
    <a class="nav-link text-white p-2" *ngIf="link.display && !link.param" routerLink="{{link.routerLink}}" translate>{{link.title}}</a>
    <a class="nav-link text-white p-2" *ngIf="link.display && link.param" routerLink="{{link.routerLink}}" [queryParams]="{link.param[0].name: 'home'}" translate>{{link.title}}</a><--This line throws error
</li>

Ошибка

ОШИБКА в: Ошибка синтаксического анализатора: Ожидается отсутствие: в столбце 6 в [{link.param [0] .name: 'home'}] в C: / Users /..../ app-nav-bar.component.html@7: 10 ("link text-white p-2" * ngIf = "link.display && link.param" routerLink= "{{link.routerLink}}" [ОШИБКА ->] [queryParams] = "{link.param [0] .name: 'home'}" translate> {{link.title}}"):Ошибка синтаксического анализатора: неожиданный токен} в столбце 28 в [{link.param [0] .name: 'home'}] в C: / Users ... / app-nav-bar.component.html@7: 10 ("ссылка text-white p-2 "* ngIf =" link.display && link.param "routerLink =" {{link.routerLink}} "[ОШИБКА ->] [queryParams] =" {link.param [0] .name:'home'} "translate> {{link.title}} ")

Итак, вопрос в том, как добавить queryParams к динамически создаваемой ссылке в Angular 7?

Любая помощь приветствуется.С уважением.

---

Обновление 1:

Ниже приводится мой tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"],
      "@env/*": ["environments/*"]
    }
  }
}

Answer 1

На самом деле это простая синтаксическая ошибка Javascript (содержимое [queryParams] интерпретируется как код Typescript механизмом шаблонов Angular).

Вы не можете объявить имя поля, используя простой синтаксис, как если бы вы указали явную константу:

const varname = 'field_name';
{ varname: 'test_value' } // <-- will not give you object { field_name: 'test_value' }

Если вы хотите добиться этого, в ES6 есть специальный синтаксис:

{ [varname]: 'test_value' } // <-- gives you the equivalent of { field_name: 'test_value' }

Так что в вашем случае замените [queryParams] на:

[queryParams]="{[link.param[0].name]: 'home'}"

Обновление после обновления 1 в вопросе :

Вы хотите убедиться, что ES6 включен в вашей конфигурации, поэтому используйте "target": "es2015" вместо es5 в вашем tsconfig.json.