iT邦幫忙

0

angular6 js外部套件載入問題

Zaku 2018-08-08 10:11:521126 瀏覽

目前使用https://weareoutman.github.io/clockpicker/

會依賴,jquery或再依賴bootstrap,目前可以使用但會報錯不知是不typescript的問題

目前流程:

npm install jquery --save
npm install clockpicker --save

npm install @types/clockpicker --save-dev
npm install @types/jquery --save-dev

載入:

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/clockpicker/dist/bootstrap-clockpicker.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/clockpicker/dist/bootstrap-clockpicker.min.js"
]

某個component內載入:
import * as jquery from 'jquery';

ngOnInit() 內綁定:
$('.clockpicker').clockpicker();

html:

<div class="input-group clockpicker">
  <input type="text" class="form-control" value="09:30">
  <span class="input-group-addon">
      <span class="glyphicon glyphicon-time"></span>
  </span>
</div>

效果是有出來但會報錯:
error TS2339: Property 'clockpicker' does not exist on type 'JQuery<HTMLElement>'.

2 個回答

0
Homura
iT邦研究生 1 級 ‧ 2018-08-08 10:29:54
最佳解答

效果是有出來但會報錯:
error TS2339: Property 'clockpicker' does not exist on type 'JQuery'.

改成這樣

(<any>$('.clockpicker')).clockpicker();

或是新增一隻檔案叫jquery.clockpicker.d.ts
裡面內容

interface JQuery {
    clockpicker():void;
  }
看更多先前的回應...收起先前的回應...
Zaku iT邦新手 4 級 ‧ 2018-08-08 10:36:24 檢舉

是過了,反而連效果都沒有

Homura iT邦研究生 1 級 ‧ 2018-08-08 10:39:44 檢舉

Zaku
貼一下你的組件Code!@@

Zaku iT邦新手 4 級 ‧ 2018-08-08 10:45:37 檢舉

補上了,詳見內文,是官方案例直接複製貼上測

Homura iT邦研究生 1 級 ‧ 2018-08-08 13:48:22 檢舉

Zaku
我早上試了一下Jquery擺在Index.html裡面可以
然後CSS丟到style.css

@import '~clockpicker/assets/css/bootstrap.min.css';
@import '~clockpicker/dist/bootstrap-clockpicker.min.css';

你的方法我還在試

Homura iT邦研究生 1 級 ‧ 2018-08-08 14:29:16 檢舉

.

Homura iT邦研究生 1 級 ‧ 2018-08-08 16:14:28 檢舉

Zaku

效果是有出來但會報錯:
error TS2339: Property 'clockpicker' does not exist on type 'JQuery'.

改一下寫法

(<any>$('.clockpicker')).clockpicker();
Zaku iT邦新手 4 級 ‧ 2018-08-09 09:56:00 檢舉

可以了,不會報錯,可以解說一下個這個寫法嗎,typescript有這寫法?

Zaku iT邦新手 4 級 ‧ 2018-08-09 09:57:16 檢舉

jquery.clockpicker.d.ts,這個怎麼實作,引入?

Homura iT邦研究生 1 級 ‧ 2018-08-09 10:22:28 檢舉

Zaku
因為typescript是強型別語言
jquery會傳回來是一個HTMLElement
你要指定型別給他才不會錯誤

jquery.clockpicker.d.ts放在app裡編譯器會自動抓不用引入

Homura iT邦研究生 1 級 ‧ 2018-08-09 10:24:40 檢舉

暗黑大這篇寫很多基礎你可以看看
http://blog.darkthread.net/post-2014-09-19-typescript-rookie-notes.aspx

Zaku iT邦新手 4 級 ‧ 2018-08-09 13:19:36 檢舉

感謝我在閱讀一下,interface要放哪邊?我放了都炸掉

Homura iT邦研究生 1 級 ‧ 2018-08-09 13:37:16 檢舉

Zaku
直接放在jquery.clockpicker.d.ts底下就行了啊
https://ithelp.ithome.com.tw/upload/images/20180809/20109839YxqSrYwapO.png

Zaku iT邦新手 4 級 ‧ 2018-08-09 15:44:51 檢舉

!!不能收納起來嗎?

Homura iT邦研究生 1 級 ‧ 2018-08-09 15:47:38 檢舉

Zaku
可以啊
像是丟在我上面app/shared裡面

Zaku iT邦新手 4 級 ‧ 2018-08-09 15:51:26 檢舉

感恩應該是可以了。jquery.clockpicker.d.ts是jquery底下的clockpicker?有固定命名規則?

Homura iT邦研究生 1 級 ‧ 2018-08-09 15:59:16 檢舉
Zaku iT邦新手 4 級 ‧ 2018-08-09 16:47:32 檢舉

/images/emoticon/emoticon12.gif

0
Rach
iT邦新手 5 級 ‧ 2018-08-08 14:00:58

你在ngoninit中抓,但因為沒rendered完所以報錯,換個life hook 就可以了。

可以試試看ngAfterViewInit,而不是在component初始化時做。

Zaku iT邦新手 4 級 ‧ 2018-08-08 14:24:02 檢舉

還是不行,大概是這樣吧:

import { Component, OnInit, AfterViewInit } from '@angular/core';

export class AComponent implements OnInit, AfterViewInit  {
    ngAfterViewInit(){
        $('.clockpicker').clockpicker();
      }
}

我要發表回答

立即登入回答