前言:
還是建議大家把angular看一下再來用蒲讯。
目的:
最近有很多使用者不知道angular的開源UI庫如何修改組件到涂。確實對于后臺系統(tǒng)來說有的時候UI庫的組件不一定能完全滿足我們的業(yè)務(wù)/設(shè)計需求个从。實地開發(fā)中在依賴于現(xiàn)有UI庫包的同時格二,我們可能需要增加一部分功能但是又不想重新開發(fā)整個組件。本篇主要來解決這個問題齿诉。以ng-alain/alain 組件delon包來做這個演示筝野。
重點:
對于開源組件包的修改問題好像有些爭議,我的大概觀點是這樣粤剧,必須遵守原有開源組件包的協(xié)議同時歇竟,如有創(chuàng)收還是盡量donate一下作者吧,以表敬意抵恋。
正文:
產(chǎn)生這個問題的主要源頭是對angular的組件化和angular如何實現(xiàn)組件化以及組件化的應(yīng)用理解不夠深刻焕议。以下通過實際操作來演示,不講概念只解決問題弧关,理解多深請諸君自己把握盅安。
1.下載ng-alain腳手架和Delon組件包。
2.復(fù)制delon/packages中所有文件到alain/share/delon文件夾下
3.alain/tsconfig.app.json梯醒;tsconfig.spec.json宽堆;tsconfig.json paths 添加? "@delon/*": ["app/shared/delon/*"]
4.去掉alain package.json delon包和ng-alain包的相關(guān)聲明。
5.npm install
6.刪除alain/delon包中 cli 和 schematics? 以及其他文件夾中多余的 json茸习,不要刪除 ts結(jié)尾的 就好 畜隶。好像有個文件夾有string.js 記得不要刪了,這個明顯是有用的。
7.ng serve 查看報錯的less引用 籽慢,可以先全局搜索?node_modules/@delon 然后對應(yīng)的文件改掉就可以了浸遗。
8.完成引入,這時候你就修改delon組件了箱亿。
9.你不會到這了都不知道怎么改吧跛锌,改代碼不用我教了吧。對應(yīng)改組件代碼就可以了届惋。K杳薄!D员郑藏??瘩欺?必盖。
結(jié)語
首先這只是個引子幫助理解組件化。angular是組件化渲染完全可以自己新增組件去替換模板的一些內(nèi)容俱饿,這么引入其實有些繁瑣了歌粥。
有人非要問為啥要包話,如果你是后端我想問你為啥要dll包和jar包呢拍埠,每次給你源碼工程不就完了失驶,說的好像很好合并升級一樣。