大家好，网站怎么安装源码分享相信很多的网友都不是很明白，包括网站源码怎么建站也是一样，不过没有关系，接下来就来为大家分享关于网站怎么安装源码分享和网站源码怎么建站的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！
使用Angular6+，在npm中生成和发布包非常容易。在本例中，我们将创建和发布星级组件。
设置
首先让我们创建一个新的Angular项目
ngnewrating
然后让我们添加新的角度库。AngularCLI提供了一种使用以下命令在新工作区中生成新库骨架的方法。
ngglibraryng-rating-bar
正如我们在这里看到的，在项目文件夹中创建了新的ng-rating-bar文件夹，并更新了3个文件。让我们看看他们中的每一个：
angular.json-添加了新的ng-rating-bar项目（projectType是库）packages.json-添加了ng-packagr依赖项，用于从已编译的代码创建可以发布到npm的包。
注意：对于普通的应用程序Angular使用@angular-devkit/build-angular:browser来构建应用程序（你可以在angular.json文件中找到它）并且对于库Angular使用ng-packagr
tsconfig.json-添加新路径，稍后将用于将库导入我们的应用程序
文件结构
新生成的库包含public-api.ts文件和lib文件夹。
lib文件夹默认包含可以在我们的库中使用的模块、组件和服务文件。
对于我们的示例，我们不需要使用服务，因此我们可以从lib文件夹和src/public.api文件中删除它。
project/ng-rating-bar/src/public.api
/*\n*PublicAPISurfaceofng-bar\n*///export*from&39;;//removethis\nexport*from&39;;\nexport*from&39;;
我们的库将显示给定配置的评级。我不会在这里包含整个代码。
“`typescript\nexportclassNgRatingBarComponentimplementsOnInit,OnChanges{\n@Input()ratingCount:number=7;\n@Input()colorActive:string=&edb867&39;39;;\n@Input()disabled=false;\n@Input()resetAble=false;\n\n@Input()control?:FormControl<number|null>;\n\n@Input()styles:Styles={\nfontSize:&39;,\nbackgroundColor:&39;,\nmargin:&39;,\npadding:&39;\n};;\n\n@Input()value:number=5;\n@Output()valueChange:EventEmitter<number>=newEventEmitter<number>();\n@Output()hoverChange:EventEmitter<number>=newEventEmitter<number>();\n@Input()symbol=&39;;\n\nnumbers:Array<number>=[];\nhoverIndex=-1;\nselectedValue=0;\nhalfValue=0;\nhalfIndex=-1;\nisHovered=false;\nconstructor(){}\n\nngOnInit(){\n\nngOnChanges(changes:SimpleChanges){\nif(changes[&39;]||this.control){\nthis.initNumbers();\nthis.calculateHalfValue();\n}\n}\n\ninitNumbers(){\nthis.numbers=Array(this.ratingCount).fill(0).map((x,i)=>i);\nif(this.control){\nthis.selectedValue=this.control.value||0;\n}else{\nthis.selectedValue=this.value;\n}\nthis.hoverIndex=this.selectedValue-1;\n}\n\nenter(i:number){\nif(this.disabled){\nreturn;\n}\nthis.isHovered=true;\nthis.hoverIndex=i;\nthis.hoverChange.emit(1+i);\n}\nleave(i:number){\nif(this.disabled){\nreturn;\n}\nthis.isHovered=false;\nthis.hoverIndex=this.selectedValue-1;\n}\n\nsetSelected(i:number){\nif(this.disabled){\nreturn;\n}\nif(this.resetAble&&this.selectedValue===i+1){\nthis.selectedValue=0;\n}else{\nthis.selectedValue=i+1;\n}\n\nif(this.control){\nthis.control.setValue(this.selectedValue||null);\nthis.control.markAsTouched();\n}else{\nthis.valueChange.emit(this.selectedValue);\n}\nthis.isHovered=false;\nthis.calculateHalfValue();\n}\n\ncalculateHalfValue(){\nthis.halfValue=Math.round(100*(this.selectedValue-Math.floor(this.selectedValue)));\nthis.halfIndex=Math.ceil(this.selectedValue)-1;\n}\n}\n\n“`
现在我们需要导出组件
import{NgModule}from&39;;\nimport{NgRatingBarComponent}from&39;;\nimport{CommonModule}from&39;;@NgModule({\ndeclarations:[\nNgRatingBarComponent\n],\nimports:[CommonModule],\nexports:[\nNgRatingBarComponent\n]\n})\nexportclassNgRatingBarModule{}
我们组件的简单使用
<ng-rating-bar\n[(value)]=&34;\n[ratingCount]=&34;\ncolorActive=&34;\ncolorDefault=&34;\n></ng-rating-bar>
将库导入应用程序
现在库已经准备好了，我们需要在我们的应用程序中导入和测试它。有2种方式：
第一种方式：我们可以直接从projects/ng-rating-bar文件夹中导入模块
第二种方式：我们可以构建我们的库并从ng-rating-bar导入它（因为在tsconfig.js中添加了新路径）
ngbuildng-rating-bar
这将在dist/ng-rating-bar文件夹中创建库的构建版本
当您从Angular应用程序的库中导入某些内容时，Angular会查找库名称和磁盘位置之间的映射。安装库包时，映射位于node_modules文件夹中。当您构建自己的库时，它必须在您的tsconfig路径中找到映射。
使用AngularCLI生成库会自动将其路径添加到tsconfig文件中。AngularCLI使用tsconfig路径来告诉构建系统在哪里可以找到库。
关注七爪网，获取更多APP/小程序/网站源码资源！
OK，关于网站怎么安装源码分享和网站源码怎么建站的内容到此结束了，希望对大家有所帮助。