内部的数据绑定(单击)在角度4

时间:2017-12-01 13:33:37

标签: angular

我试图绑定存储在配置文件中的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

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

试试这个

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

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

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