使用 Ionic3 调用函数时出现运行时错误

Question

我是 ionic 的新手。我做了一个弹出窗口。现在我想在弹出窗口上制作标签。这里我使用了来自 www.w3schools.com 的 javascript 标签。它运行但当我单击一个选项卡时它显示 运行时错误 opencity 函数未定义。我该如何解决？

popover.html

<!-- Generated template for the PopoverComponent component -->
<div class="bg-image" style="height: 300px;">
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
</div>

popover.ts

import { Component } from '@angular/core';


@Component({
 selector: 'popover',
  templateUrl: 'popover.html'
})

export class PopoverComponent {

 text: string;

constructor() {
console.log('Hello PopoverComponent Component');
this.text = 'Hello World';
}

}

function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}

Answer 1

在 popover.html 中必须将 onclick 更新为（点击）功能，如：

<!-- Generated template for the PopoverComponent component -->
  <div class="bg-image" style="height: 300px;">
    <div class="tab">
      <button class="tablinks" (click)="openCity(event, 'London')">London</button>
      <button class="tablinks" (click)="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" (click)="openCity(event, 'Tokyo')">Tokyo</button>
    </div>
    ....
  </div>

和popover.ts这样的文件，在PopoverComponent里面class:

import { Component } from '@angular/core';
@Component({ selector: 'popover', templateUrl: 'popover.html' })

export class PopoverComponent {

    text: string;

    constructor() {
        console.log('Hello PopoverComponent Component');
        this.text = 'Hello World';
    }

    openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
}

使用 Ionic3 调用函数时出现运行时错误

Runtime error in function calling using Ionic3

ionic-framework

ionic2

ionic3