Input是提供文本、數字、日期等等錄入控制項,本文就來介紹如何在Angular2下使用Input控制項。
功能介紹
支持Angular 2的輸入控制項可以創建豐富的Hybrid應用
使用Angular2創建輸入控制項工程
1.創建新工程
首先創建一個HTML Application with TypeScript新工程,如下圖所示:
2.刪除文件
選擇工程中的app.css, app.ts和index.html文件,並刪除。
如圖所示:
3.更改工程配置
選擇工程-屬性。在配置對話框里,將TypeScriptBuild->Module system更改為CommonJS
如圖:
4.更新
首先選擇工程的UploadProject
接著選擇工程的編輯工程,如下圖(4-2):
然後在文件中粘貼:
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
點擊右側工程的Reload Project(如圖4-2)中所示的列表。
最後在彈出的對話框中點擊Yes按鈕。
5.添加Json文件
在工程里添加新的Json文件,如圖:
並且把內容複製到新建的Json文件中。
6.編輯頁面
打開default.html文件,開始編輯頁面和添加控制項。
首先在<head></head>中添加引用。
繼續添加必要的wijmo引用:
添加css引用:
在使用js之前,需要添加如下的代碼:
7.在工程中添加必要文件夾
在工程中添加scripts/src/styles文件夾,並添加default.html文件。
如圖:
打開工程所在文件夾,在script文件夾下添加2個文件夾,分別為:vendor和definitions
definitions文件夾下需要添加wijmo.d.ts和wijmo.grid.d.ts文件(文件可以在安裝包路徑中找到:\C1Wijmo-Eval_5.20163.234\Dist\controls)
同樣的,把wijmo.chart.min.js和wijmo.min.js添加到vendor文件夾下:
再從安裝包中(\C1Wijmo-Eval_5.20163.234\Dist\interop\angular2)文件夾下複製wijmo.angular2.min.js文件到vendor文件夾下:
在node_modules文件夾創建wijmo文件夾,並把所有的angular2所需要的文件複製過去。
最後將基本的styles文件(wijmo.css)複製到之前創建的styles文件夾中。
8.包含文件
返回到工程中,將上一步驟添加的文件通過Include In Project都包含到工程中。
9.添加app文件
在工程的src文件夾中添加新的TypeScript文件(起名app.ts)
再添加一個HTML頁面叫做app.html.
然後再styles文件夾下添加app.cs.
添加后結果如圖:
接著在app.ts文件中引入angular2文件。
如果是要使用Input輸入類控制項,那麼也需要引入input文件。
生成一個叫做app的類:
export class app{ }bootstrap(app,);
10.添加Input控制項
最後配置View,在app.html里添加日期控制項,代碼參考:
<wj-input-date [required]="false"></wj-input-date>
最後返回到default.html頁面
defult.html頁面的代碼:
運行頁面得到如下結果:
免費試用
請通過以下方式聯繫葡萄城,獲取Wijmo的免費試用版:
微信:GrapeCityDT
官網:wijmo.gcpowertools.com.cn
關於葡萄城控制項
葡萄城是一家跨國軟體研發集團,專註控制項領域近30年,是全球最大的控制項提供商,也是微軟認證的金牌合作夥伴