内側のデータバインディング（クリック）が角度4で機能しない

Question

設定ファイルに格納されているURLをバインドしようとしていますが、角度4の（クリック）イベントでバインドできませんが、補間はsrc imgのタグ。私が試した以下の例を参照してください。このため

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> 

コンポーネントでは、あなたがこの

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

のような関数を定義することができます試してみてください