0

这里已经有一个关于它的问题，但这对我不起作用。

以下代码在我的 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'}" translate>{{link.title}} ") : Parser Error: Unexpected token } at column 28 in [{link.param[0].name: 'home'}] in C:/Users.../app-nav-bar.component.html@7:10 ("link text-white p-2" *ngIf="link.display && link.param" routerLink="{{link. routerLink}}" [ERROR ->][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/*"]
    }
  }
}
4

1 回答 1

0

这实际上是一个简单的 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.

于 2019-06-24T11:48:23.677 回答