Zi 字媒體
2017-07-25T20:27:27+00:00
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和definitionsdefinitions文件夾下需要添加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郵件：marketing.xa@grapecity.com官網：wijmo.gcpowertools.com.cn關於葡萄城控制項葡萄城是一家跨國軟體研發集團，專註控制項領域近30年，是全球最大的控制項提供商，也是微軟認證的金牌合作夥伴
寫了
5860316篇文章，獲得
23313次喜歡