Angular2上应用基于jQuery的Bootstrap 3 - iconpicker

Iconpicker是一个用于Bootstrap 3 的jQuery图标选择器插件，允许您在工具提示类似的弹出界面中从多个图标集中选择并选择一个图标。

参考：
http://www.jqueryscript.net/other/jQuery-Based-Icon-Picker-For-Bootstrap-3-iconpicker.html
https://victor-valencia.github.io/bootstrap-iconpicker/#

1.下载bootstrap-iconpicker和bootstrap，jQuery没有的话也得下载

cnpm install bootstrap-iconpicker -S
cnpm install bootstrap --save

(-S和–save 等效)

2.加入相关js和css
在.angular-cli.json中加入js和css

"styles": [
        "styles.css"
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js"
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js",
        "../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-fontawesome-4.7.0.min.js"
      ]

理论上在.angular-cli.json中加了js和css就可以了，但不知道什么原因需要在index.html中引入css才可以，本人初学，如有不对，多多见谅，更希望得到指教。哈哈

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>

3.在app.component.html中创建带有role=”iconpicker”属性的图标选择器按钮，以初始化插件

    <div class="input-group">
      <input type="text" class="form-control" [(ngModel)]="mResult" name="result">
      <span class="input-group-btn">
        <button id="target" name="target" class="btn btn-default" data-icon="glyphicon-chevron-down" role="iconpicker"
                data-selected-class="btn-danger" data-unselected-class="btn-info"
             (click)="clickIcon()"
        >
        </button>
    </span>
    </div>

4.在app.component.ts中引入相关js，并初始化

import '../../node_modules/bootstrap/dist/js/bootstrap.min.js';
import '../../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js';
import '../../node_modules/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-fontawesome-4.7.0.min.js';

 mResult:string = "";

 ngOnInit() {
    jQuery('#target').iconpicker({
      iconset: 'fontawesome',
      icon: 'glyphicon-chevron-down',
      rows: 5,
      cols: 5,
      placement: 'bottom',
    });
  }

  clickIcon(){
    jQuery('#target').on('change',(e)=>{
      console.log(this.mResult);
      this.mResult = e.icon;
    });
  }

结果如图：

图标集和图标也有很多选择。
添加data-iconset=”glyphicon|ionicon|fontawesome|weathericon|mapicon|octicon|typicon|elusiveicon|flagicon”到查看图标集即可。
可以参考https://victor-valencia.github.io/bootstrap-iconpicker/#