Angular6用户自定义标签开发的实现方法

2018年四月23随着angular6发布，我们可以看到在其官方手册中的模板元素章节中增加了一个元素条目（中文),通过说明我们可以知道这个功能可以帮助我们将有角的以超文本标记语言标签的形式嵌入到非有角的的页面环境中。下面我们就通过一个简单的例子演示角度6中的这一新功能。

新建有角的工程

通过尼日利亚命令新建定制标签工程

尼日利亚新的自定义标记新建完相应文件后会通过新公共管理下载所信赖的包，完成后进入目录验证工作空间是否正常。

$cd定制标签$ng服务-开放-开放参数的作用是直接打开浏览器，也可以通过浏览器中直接输入本地主机：4200 .

增加标签功能

修改app.component.html内容

！-下面的内容只是一个占位符，可以替换。- !-div style=' text-align : center ' h1欢迎使用{{ title }}！/h1 img width=' 300 ' alt=' Angular Logo ' src=' http : data : image/SVG XML；base64，phn2zy B4 bwxukz 0 iahr0 cdovl3d 3d 3d dy 53 M5 vcmcvmjawm 9 zdmci ihzpzxdcb 3g 9 ij jagmaycyntagmjuwij4kicagdxwyxroigzpgw 9 iinerdawmzegq 9 ik0x mjugmzzeuosa 2 my 4 ybde 0 ljiziljfmti 1 dizimgw 3 oc 45 lt qzljcgmt qumi0x mjmumxoiic 8 ciagica 8 CGF 0 aczijfmti条目输入类型='按钮'值='增加（单击)=' addItem(输入文本。value)' ul Li * ngFOr=' let item of item ' { item } }/Li/ul为对应的类增加addItem()方法，向类中的条目集合（项目)增加用户输入的一个条目。

从“@棱角分明/核心”导入{组件}；@ Component({选择器： ' app-root '，模板Url: ' ./app.component.html '，style URL 3360[]./app.component.css']})导出类AppComponent { addItem(项目：字符串){ console。日志(`$ { item }待添加！`);这个。物品。推送(项目)；} item : string[]=[]；}小结

到目前为止这是一个普通的有角的应用，通过增加按钮，要以向列表中增加元素。

应用状态

将完成内容转换为自定义标签

增加@角度/分量信赖

$ng add @angular/elements修改app.module.ts

从包中导入相关依赖：

从“@棱角分明/核心”导入{注射器}；从" @角度/元素"导入{ createCustomElement }；将AppComponent改为动态组件，并通过createCustomElement()注册AppComponent为定制项目

从" @angular/platform-browser "导入{ BrowserModule }；从“@棱角分明/核心”导入{模块，注射器}；从" @角度/元素"导入{ createCustomElement }；从""导入{ AppComponent } ./app。组件'；@ NgModule({声明：[AppComponent]，imports: [ BrowserModule ]，providers: []，//bootstrap :[appcomponents]entryComponents :[AppComponent])导出类AppModule {构造函数（私有注入器：注入器){ const cust _ tag=createCustomElement(AppComponent，{ Injector 3: this。注射器})；customelements。define(' custom-items '，cust _ tag)；} ngDoBootstrap() {} }修改index.html页面

！doctype html html lang=' en ' head meta charset=' utf-8 ' title custom tag/title base href='/' rel=' external no follow ' meta name=' viewport ' content=' width=device-width，initial-scale=1 ' link rel=' icon ' type=' image/x-icon ' href=' fav icon。ico ' rel='外部无跟随'/head dy！- app-root/app-root -自定义-项目/自定义-项目/正文/html页面重新出现在浏览器中了，功能也同先前一模一样。

由于浏览器版本的原因可能会出现下面错误，无法创建自定义标签

元素js:384 .未捕获类型错误：未能构造“HTMlelement”:请使用“新”运算符，此数字正射影像图对象构造函数不能作为函数调用。在天使投资人.在新的AppModule(核心。js :8326)处的_ createClass(核心。js :8321)处的新的AppModule (app.module.ts:24)处的新的angelement impl(元素。js :384)处的新的angelementimpl(元素。js :420)处的新的AppModule(核心。js 3:8326)处的新的_ createproviderinsite(核心。js。js 3:8326)处的推./node _ modules/@ angular/core/fesm 5/core。js。ngmodulefactory _ .创建(core.js:11583)

可以通过修改tsconfig.json中的构建目标至es6解决该问题

{“CompileonSave”: false，“compileoroptions”: {“base URL”:)./'，' outDir':/dist/out-tsc '，' sourceMap': true '声明： false，“moduleResolution”:“node”，“emitemodiormetadata”: true，“experiatealdecorators”: true，“target”:“es6”，“type root”:[“node _ modules/@ type”]，“lib”:[“es 2017”，“DOM”]} }增加外部事件

通过输出可以为自定义标签增加自定义事件

从“@棱角分明/核心”导入{组件、输出、事件发射器}；@ Component({选择器： ' app-root '，模板Url: ' ./app.component.html '，style URL 3360[]./app.component.css']})导出类AppComponent { @ Output())item dedd :事件emiteterstring=new事件emiter string()；addItem(项目：字符串){控制台。日志(`$ { item })要添加！`);这个。物品。推送(项目)；//向外发送自定义事件这个。已添加项目。发出(项)；} item : string[]=[]；}在客户端页面可以通过自定义标签对象的addEventListener()方法增加自定义事件响应，通过事件。细节可以获取到有角的内部发送的内容

脚本变量项目=文档。query selector(' custom-items ')；物品。addeventlistener('添加了项'，(事件)={ console。日志(事件)；})/脚本完结与发布

在package.json中增加发布脚本

脚本： { 'ng': 'ng '，' start': 'ng serve '，' build ' : ' ng build-prod-output-hashing none '，' test': 'ng test '，' lint': 'ng lint '，' e2e': 'ng e2e' }，通过新公共管理运行构建执行构建，由于我们关闭了文件名哈希，得到的输出目录内容如下：

[电子邮件保护]: ~/WebDev/自定义标签$ ls ./dist/自定义标签/第三方许可证。txt favicon。ico index.html大街。js poly填充。js运行时。js脚本。js风格。半铸钢钢性铸铁(Cast Semi-Steel)我们可以看到输出的index.html文件中采用如下方式引用了定义标签的输出，如果其他用户使用会非常不便，

脚本类型=' text/JAVAScript ' src=' http : runtime。js '/script脚本类型=' text/JavaScript ' src=' http : poly fills。js '/script脚本类型=' text/JavaScript ' src=' http :脚本。js '/script脚本类型=' text/JavaScript ' src=' http 3360 main。js '/脚本我们可以通过使用猫命令将这些文件按照上面顺序合并成一个文件

$ cat运行时。js poly填充。js脚本。js main。js自定义项。射流研究…这样用户就可以引用单个文件来使用我们制做的定制项目了。

一定注记合并文件的次序，需要严格按照上述次序进行，否则脚本可能不能正常工作。

示例代码

在线示例

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。