应用浏览器 IONIC 3 中的模板解析错误

Question

我一直在做一个需要在应用内打开网站的项目。 所以，我将 Cordova InAppBrowse 用于离子 3。 问题是，我收到错误显示解析错误。

在 index.html 上

<div style="text-align: center;">

  <button ion-button type="button" (click)="open('https://coins4ar.com/{{coinsGroup.symbol}}/')">More Info
</button>
  </div>

在 index.ts 上

import { InAppBrowser } from '@ionic-native/in-app-browser';

@Component({
  selector: 'page-index',
  templateUrl: 'index.html'
})
export class IndexPage {
  constructor(public navCtrl: NavController, public navParams: NavParams, private iab: InAppBrowser,
    private data: DataProvider, public http: HttpClient) {
  }

coinsGroup = [];


ionViewDidLoad() {

    this.coinsGroup = this.navParams.data;  

  }
open(url:string) {  
    let browser = this.iab.create(url,'_blank', 'location=yes');
    browser.show();
  }

}

我遇到了错误

VM66652 vendor.js:100970 Uncaught Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 27 in [open('https://coins4ar.com/{{coinsGroup.symbol}}/')] in ng:///AppModule/IndexPage.html@190:39 ("
    -->

      <button ion-button type="button" [ERROR ->](click)="open('https://coins4ar.com/{{coinsGroup.symbol}}/')">More Info</button>
  </div>

"): ng:///AppModule/IndexPage.html@190:39
    at syntaxError (VM64228 vendor.js:100970)
    at TemplateParser.parse (VM64228 vendor.js:125153)
    at JitCompiler._parseTemplate (VM64228 vendor.js:135106)
    at JitCompiler._compileTemplate (VM64228 vendor.js:135081)
    at VM64228 vendor.js:134982
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (VM64228 vendor.js:134982)
    at VM64228 vendor.js:134852
    at Object.then (VM64228 vendor.js:100959)
    at JitCompiler._compileModuleAndComponents (VM64228 vendor.js:134851)

使用 Anchor Tag 时可以正常工作，但会在应用程序之外启动网站。

Answer 1

我相信你的问题出在这一行

(click)="open('https://coins4ar.com/{{coinsGroup.symbol}}/')"

你需要把它改成

(click)="open('https://coins4ar.com/'+coinsGroup.symbol+/')" 

你可以在这里找到工作示例解决方案https://stackblitz.com/edit/angular-qp3xhw

更新

或者如果您可以访问 ts 文件中的 coinsGroup，请执行此操作

(click)="openLink()"

在你的 ts 文件中

openLink() {
  const url = `https://coins4ar.com/${this.coinsGroup.symbol}/`;
  ... open page from here
}