这里已经有一个关于它的问题,但这对我不起作用。
以下代码在我的 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/*"]
}
}
}