Question

已经有一个关于这个问题的here问题，但这对我没有用。

以下代码是在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中的[{link.param [0] .name：'home'}]中的第6列.html @ 7：10（“链接文本白色p-2” * ngIf =“ link.display && link.param” routerLink =“ {{link.routerLink}}” [ERROR->] [queryParams] =“ {link.param [0] .name：'home'}” translation> {{link.title}} ”）：分析器错误：意外令牌}位于C：/ Users ... / app-nav-bar.component.html@7：10（[{link.param [0] .name：'home'}]]中第28列（ “链接文本白色p-2” * ngIf =“ link.display && link.param” routerLink =“ {{link.routerLink}}” [ERROR->] [queryParams] =“ {link.param [0] .name：'home'}” translation> {{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，因此请在您的"target": "es2015"中使用es5而不是tsconfig.json。

如何在Angular 7中将queryParams动态添加到动态创建的链接中？

1 个答案: