Question

我试图绑定存储在配置文件中的url在角度4的（click）事件中没有得到可绑定但是插值在img的src标签内部工作。请参阅我尝试过的以下示例。

app.config.ts

export class AppConfig {
    //Local API URL for Testing
    public readonly apiUrl = "http://localhost:4200/";
};

为此，我已经在component.ts文件中导入了app.config.ts。当我为图像标记执行此操作时，字符串插值工作正常。请参阅下文以供参考。

<img src="{{this.apiUrl}}/assets/images/logo.svg" alt="Home" />

当我尝试在点击事件中使用插值时，以下代码存在问题。

 <li routerLinkActive="active" *ngIf="type == 'admin'">
                    <a href="javascript:void(0);" (click)="navigateExternal('{{this.apiUrl}}/dashboard','_self')">Dashboard</a>
    </li>

获得以下错误

Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 18 in [navigateExternal('{{this.apiUrl}}/dashboard','_self')] in ng:///AppModule/HeaderComponent.html@35:46 ("li routerLinkActive="active" *ngIf="type == 'admin'">
                <a href="javascript:void(0);" [ERROR ->](click)="navigateExternal('{{this.apiUrl}}/dashboard','_self')">Dashboard</a>
              </li>
   "): ng:///AppModule/HeaderComponent.html@35:46

Answer 1

不使用点击，您可以直接指定为，

<a target="_self" href="{{apiUrl}}/dashboard">Dashboard</a>

Answer 2

试试这个

<a target="_self" [href]="getapiUrl(apiUrl)">Dashboard</a>

在Component中，您可以定义类似这样的函数

getapiUrl(apiUrl){
  return apiUrl + '/dashboard';
}

内部的数据绑定（单击）在角度4

2 个答案: