Angular6 用户自定义标签开发的实现方法
2018年4月23随着angular6 发布，我们可以看到在其官方手册中的模板元素章节中增加了一个element 条目(中文)，通过说明我们可以知道这个功能可以帮助我们将angular以html标签的形式嵌入到非angular的页面环境中。下面我们就通过一个简单的例子演示angular6中的这一新功能。
新建angular工程
通过ng命令新建custom-tag工程
ng new custom-tag
cli新建完相应文件后会通过npm下载所信赖的包，完成后进入目录验证工作空间是否正常。
$cd custom-tag $ng serve --open
--open参数的作用是直接打开浏览器，也可以通过浏览器中直接输入localhost:4200。
增加标签功能
修改app.component.html 内容
<!--the content below is only a placeholder and can be replaced.-->
<!--
<div style="text-align:center">
<h1>
welcome to {{ title }}!
</h1>
<img width="300" alt="angular logo" src="data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihzpzxdcb3g9ijagmcayntagmjuwij4kicagidxwyxroigzpbgw9iinerdawmzeiigq9ik0xmjugmzbmmzeuosa2my4ybde0ljigmtizljfmmti1idizmgw3oc45ltqzljcgmtqumi0xmjmumxoiic8+ciagica8cgf0acbmawxspsijqzmwmdjgiibkpsjnmti1idmwdjiyljitljfwmjmwbdc4ljktndmunyaxnc4ylteymy4xtdeynsazmhoiic8+ciagica8cgf0acagzmlsbd0ii0zgrkzgriigzd0itteynsa1mi4xtdy2ljggmtgyljzomjeun2wxms43lti5ljjondkungwxms43idi5ljjimtgztdeynsa1mi4xem0xnya4my4zac0zngwxny00mc45ide3idqwljl6iiavpgogidwvc3znpg==">
</div>
<h2>here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial" rel="external nofollow" >tour of heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki" rel="external nofollow" >cli documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/" rel="external nofollow" >angular blog</a></h2>
</li>
</ul>
-->
<input #inputtext type="text" placeholder="条目">
<input type="button" value="增加" (click)="additem(inputtext.value)">
<ul>
<li *ngfor="let item of items">{{item}}</li>
</ul>
为对应的类增加 additem()方法，向类中的条目集合(items)增加用户输入的一个条目。
import { component } from '@angular/core';
@component({
selector: 'app-root',
templateurl: './app.component.html',
styleurls: ['./app.component.css']
})
export class appcomponent {
additem(item:string){
console.log(`${item} to be added!`);
this.items.push(item);
}
items:string[] =[];
}
小结
到目前为止这是一个普通的angular应用，通过增加按钮，要以向列表中增加元素。
应用状态
将完成内容转换为自定义标签
增加@angular/comonents信赖
$ng add @angular/elements
修改app.module.ts
从包中导入相关依赖:
import { injector} from '@angular/core';
import { createcustomelement } from '@angular/elements';
将appcomponent改为动态组件，并通过createcustomelement()注册appcomponent为custom-items
import { browsermodule } from '@angular/platform-browser';
import { ngmodule,injector } from '@angular/core';
import { createcustomelement } from '@angular/elements';
import { appcomponent } from './app.component';
@ngmodule({
declarations: [
appcomponent
],
imports: [
browsermodule
],
providers: [],
//bootstrap: [appcomponent]
entrycomponents : [
appcomponent
]
})
export class appmodule {
constructor(private injector : injector){
const cust_tag = createcustomelement(appcomponent, {injector : this.injector});
customelements.define('custom-items',cust_tag);
}
ngdobootstrap() {}
}
修改index.html页面
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>customtag</title> <base href="/" rel="external nofollow" > <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico" rel="external nofollow" > </head> <body> <!--<app-root></app-root>--> <custom-items></custom-items> </body> </html>
页面重新出现在浏览器中了，功能也同先前一模一样。
由于浏览器版本的原因可能会出现下面错误，无法创建自定义标签
elements.js:384 uncaught typeerror: failed to construct 'htmlelement': please use the 'new' operator, this dom object constructor cannot be called as a function.
at ngelementimpl.ngelement [as constructor] (elements.js:384)
at new ngelementimpl (elements.js:420)
at new appmodule (app.module.ts:24)
at _createclass (core.js:8421)
at _createproviderinstance (core.js:8393)
at initngmodule (core.js:8326)
at new ngmoduleref_ (core.js:9052)
at createngmoduleref (core.js:9041)
at object.debugcreatengmoduleref [as createngmoduleref] (core.js:10866)
at ngmodulefactory_.push../node_modules/@angular/core/fesm5/core.js.ngmodulefactory_.create (core.js:11583)
可以通过修改tsconfig.json中的构建目标至es6解决该问题
{
"compileonsave": false,
"compileroptions": {
"baseurl": "./",
"outdir": "./dist/out-tsc",
"sourcemap": true,
"declaration": false,
"moduleresolution": "node",
"emitdecoratormetadata": true,
"experimentaldecorators": true,
"target": "es6",
"typeroots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}
增加外部事件
通过output 可以为自定义标签增加自定义事件
import { component,output, eventemitter } from '@angular/core';
@component({
selector: 'app-root',
templateurl: './app.component.html',
styleurls: ['./app.component.css']
})
export class appcomponent {
@output() itemadded:eventemitter<string> = new eventemitter<string>();
additem(item:string){
console.log(`${item} to be added!`);
this.items.push(item);
// 向外发送自定义事件
this.itemadded.emit(item);
}
items:string[] =[];
}
在客户端页面可以通过自定义标签对象的addeventlistener()方法增加自定义事件响应，通过 event.detail可以获取到angular内部发送的内容
<script>
var items = document.queryselector('custom-items');
items.addeventlistener('itemadded', (event) => {
console.log(event);
})
</script>
完结与发布
在package.json中增加发布脚本
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --output-hashing none",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
通过npm run build 执行构建，由于我们关闭了文件名hash,得到的输出目录内容如下：
liunan@liunan-desktop:~/webdev/custom-tag$ ls ./dist/custom-tag/ 3rdpartylicenses.txt favicon.ico index.html main.js polyfills.js runtime.js scripts.js styles.css
我们可以看到输出的index.html文件中采用如下方式引用了定义标签的输出，如果其他用户使用会非常不便，
<script type="text/javascript" src="runtime.js"></script> <script type="text/javascript" src="polyfills.js"></script> <script type="text/javascript" src="scripts.js"></script> <script type="text/javascript" src="main.js"></script>
我们可以通过使用cat命令将这些文件按照上面顺序合并成一个文件
$cat runtime.js polyfills.js scripts.js main.js > custom-items.js
这样用户就可以引用单个文件来使用我们制做的custom-items了。
一定注记合并文件的次序，需要严格按照上述次序进行，否则脚本可能不能正常工作。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。