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

Question

我一直在做一个需要在应用程序中打开网站的项目。因此，我将 Cordova InAppBrowse 用于 ionic 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)

使用锚标签时工作正常，但它会在应用程序外启动网站。

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
}

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

Template parse errors In App Browser IONIC 3

inappbrowser

ionic3

更新