Javascript 爱奥尼亚3应用程序-使用非爱奥尼亚html组件的最佳方式

爱奥尼亚图书馆提供了大量的组件和文档。因此，如果您需要一个带有自定义函数onClick的按钮，您可以通过将该按钮放入page.html（在我的例子中是home.html）中，快速找到实现该功能的最佳方法

但是，使用非离子元素（如标准html复选框元素）的最佳方法是什么？因为离子3没有星级元素，所以我必须为这个元素导入第三方解决方案

渲染效果很好，星级评级如下所示

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

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

复选框元素如下所示：

<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>

我强烈建议使用组件。我曾在我的

Ionic 3/Angular 5

应用程序中使用过它，它工作得非常好。如果您对它有任何问题，请告诉我

.html

max=“5”
emptyStarionName=“星形轮廓”
halfStarIconName=“星对半”
starIconName=“star”
nullable=“false”
（ngModelChange）=“onModelChange（$event）”

试试这个：是的，这很有帮助。如果那里没有合适的离子成分，我仍然不知道该怎么办，如果有人能解释一下，我将不胜感激。尽管参考的成分有所帮助。在这种情况下，有人和我一样没有什么经验，重要的是要理解，可以使用CLI将不同的组件导入到ionic项目中，就像ionic2评级组件一样。npm网站上的说明是自我解释的。你对这个组件有什么问题吗？它工作起来很有魅力。我仍然想知道我需要做什么，以防没有合适的组件，我会使用一个标准的定制复选框。你不必担心这一点。离子群落是巨大的。所以你可以通过离子的方式找到大部分溶液。

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);
  }
}

<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>

<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>