javascript - Ionic 3 App - 使用非 ionic html 组件的最佳方式

Question

Ionic 库提供了大量组件，而且文档也很棒。因此，如果您需要一个带有名为 onClick 的自定义函数的按钮，您可以通过将按钮放入 page.html(在我的例子中是 home.html)中快速找到实现它的最佳方法

<button ion-button (click)="logEvent(this)"> Button</button>

并将函数添加到 page.ts(在我的例子中是 home.ts)

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  logEvent(event) {
    console.log(event);
  }
}

但是处理非 ionic 元素(例如标准 html 复选框元素)的最佳方式是什么？因为 Ionic 3 没有星级元素，所以我必须为这个元素导入第三方解决方案。

渲染效果很好，星级评分是这样的

现在我的问题是，我需要将一个 onClick 函数绑定(bind)到复选框元素的输入。在 JavaScript 方面有一些小经验，我倾向于在 page.html 中简单地定义一个脚本部分并进行一些常规的 JavaScript 绑定(bind)。然而，这感觉不对，甚至似乎不起作用。

如果有经验的人能指出最可能明显的方法，我将不胜感激，因为我无法用谷歌搜索。显然我找错了方向。

复选框元素如下所示:

<div class="wrapper">
  <input type="checkbox" id="st1" value="1" />
  <label for="st1"></label>
  <input type="checkbox" id="st2" value="2" />
  <label for="st2"></label>
  <input type="checkbox" id="st3" value="3" />
  <label for="st3"></label>
  <input type="checkbox" id="st4" value="4" />
  <label for="st4"></label>
  <input type="checkbox" id="st5" value="5" />
  <label for="st5"></label>
</div>

Answer 1

我强烈推荐使用 ionic2-rating成分。我已经在我的 Ionic 3/Angular 5 应用程序之一中使用它，它运行良好。如果您有任何问题，请告诉我。

.html

<rating [(ngModel)]="rate" 
        readOnly="false" <!--default value-->
        max="5" <!--default value-->
        emptyStarIconName="star-outline" <!--default value-->
        halfStarIconName="star-half" <!--default value-->
        starIconName="star" <!--default value-->
        nullable="false" <!--default value-->
        (ngModelChange)="onModelChange($event)"> <!--use it when you need to do something when user clicks on a star. in case you only need to change ngModel property, this property can be ommited.-->
</rating>