如何动态地将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>

错误

错误输入：分析器错误：缺少预期：在C：/ Users /..../ app-nav-bar.component.html @中[{link.param [0] .name：'home'}]的第6列7:10（“link text-white p-2”* ngIf =“link.display && link.param”routerLink =“{{link.routerLink}}”[ERROR - >] [queryParams] =“{link.param [0] .name：'home'}“翻译> {{link.title}}”）：解析器错误：[{link.param [0] .name：'home'}]中第28列的意外令牌} 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'}“翻译> {{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]的内容被Angular模板引擎解释为Typescript代码）。

您不能像使用显式常量那样使用简单语法声明字段名称：

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，因此在es5中使用"target": "es2015"而不是tsconfig.json 。