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了。
一定注记合并文件的次序，需要严格按照上述次序进行，否则脚本可能不能正常工作。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
AngularJS标签页tab选项卡切换功能经典实例详解
本文实例讲述了AngularJS实现标签页tab选项卡功能.分享给大家供大家参考,具体如下: 选项卡一: JavaScript+html+css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net js标签页tab切换</title> <style> #div1 .active{ background:blue
-
AngularJS 打开新的标签页实现代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html ng-app="myPro"> <head> <meta charset="UTF-8"> <title>angularJS-打开新的标签页</title> <script type="text/javascript" src="js/angular.min.js
-
详解angular用$sce服务来过滤HTML标签
angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签.对于angular 1.2一下的版本我们必须要使用$sce这个服务来解决我们的问题.它可以通过使用$sce.trustAsHtml().该方法将值转换为特权所接受并能安全地使用"ng-bind-html". controller('HealthEducationDe
-
Angular 实现输入框中显示文章标签的实例代码
很多网站发帖的时候标签输入框看起来像是在 <input> 元素中直接显示标签. 比如这种 一开始以为是把 <span> 放在 <input> 中, 看了下 Stack Overflow 和 SegmentFault 的实现方式, 原来是用一个 <div> 把 <span> 和 <input> 包起来, 然后让 <div> 模仿出输入框的样式. 再给 <div> 加上eventListensor, 点击 <
-
AngularJS实现标签页的两种方式
一.通过普通指令实现标签页 <link rel="stylesheet" href="views/show/tab.css"/> <div> <ul class="nav nav-tabs" ng-init="vm.activeTab=1"> <li ng-class="{active: vm.activeTab == 1}"><a href="
-
angular4模块中给标签添加背景图的实现方法
一.现象 一个全屏的"走马灯"每项需要添加背景图,在循环标签里需要动态添加行内样式 二.解决 1.首先有一个图片数组,如: export class AppComponent { array = ["url(/assets/images/img1.png)","url(/assets/images/img2.png)"]; } 2.模块中添加数据,如: <div nz-carousel-content *ngFor="let it
-
Angular.js中ng-include用法及多标签页面的实现方式详解
前言 大家在平时的项目开发中,应该会经常遇到上图所示的需求,就是在一个页面中有多个标签,被选中的标签颜色会高亮显示,切换不同标签显示相应的不同内容.如果内容代码过多则写在同一个html文件就会显得特别乱,所以这里我们最好把页面代码分开单独管理,controller也可以分开来管理,这样就会显得清楚的多. 这里就要使用到Angularjs中个ng-include指令.下面来看看详细的介绍: 一.多标签的编写 首先需要了解需求: 1.同时只能选中一个标签 2.被选中的标签背景色以及自体颜色都将改变.
-
详解Angular.js数据绑定时自动转义html标签及内容
angularJS在进行数据绑定时默认是以字符串的形式数据,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止html标签的注入攻击,但有时候需要,特别是从数据库读取带格式的文本时,无法正常的显示在页面中. 而要对html进行转义,则需要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sanitize,也就是需要引入angular-sanitize.js文件,并在module定义时注入该服务ngSanitize.比如: html: <span ng
-
Angular中点击li标签实现更改颜色的核心代码
点击ng-repeat遍历后的li标签,实现更改border颜色: html代码: <ul ng-if="params.questionTypeId == 8"> <li class="gamePre-def" ng-repeat=" word in wordsDef" ng-click='li_click($index)' ng-class='{focus: $index == focus}'> {{word}}<
-
Angular6 用户自定义标签开发的实现方法
2018年4月23随着angular6 发布,我们可以看到在其官方手册中的模板元素章节中增加了一个Element 条目(中文),通过说明我们可以知道这个功能可以帮助我们将angular以html标签的形式嵌入到非angular的页面环境中.下面我们就通过一个简单的例子演示Angular6中的这一新功能. 新建angular工程 通过ng命令新建custom-tag工程 ng new custom-tag cli新建完相应文件后会通过npm下载所信赖的包,完成后进入目录验证工作空间是否正常. $c
-
JavaScript获得页面base标签中url的方法
本文实例讲述了JavaScript获得页面base标签中url的方法.分享给大家供大家参考.具体如下: 如果网页中定义了base标签,我们可以通过js代码获得base的url地址 <!DOCTYPE html> <html> <head> <base id="htmldom" href="http://www.jb51.net/"> </head> <body> <p>Base UR
-
CentOS 7下配置Ruby语言开发环境的方法教程
本文跟大家分享的是在CentOS 7下配置Ruby语言开发环境的方法教程,分享出来供大家参考学习,下面来看看详细的介绍: 安装Ruby 2.2 CentOS7存储库中的Ruby版本为2.0,但如果需要,可以使用RPM软件包安装2.2 1.添加CentOS SCLo软件集合存储库 [root@linuxprobe ~]# yum -y install centos-release-scl-rh centos-release-scl # set [priority=10] [root@linuxpr
-
innerHTML中标签可以换行的方法汇总
在用innerHTML生成结构时,为了看起来结构明快,可以在每行的末尾加一个反斜线\,即可保持html原结构,而不至于将标签都挤在一块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>innerHTML中标签可以换行的方法</title> </head> <body> <sc
-
C#删除UL LI中指定标签里文字的方法
本文实例讲述了C#删除UL LI中指定标签里文字的方法.分享给大家供大家参考,具体如下: 现在需求越来越变态,但是做代码只能尽量满足,这里先是扣去ul和li中的超链接里的文字 PromptHtml = GetData.GetHTTPInfo(Config.Prompt_Url, "utf-8"); PromptHtml = PromptHtml.Replace("<ul><li>", ""); PromptHtml=Pro
-
JavaScript获取并更改input标签name属性的方法
本文实例讲述了JavaScript获取并更改input标签name属性的方法.分享给大家供大家参考.具体实现方法如下: <input name="kk"></input> <script language="javascript"> // 这里用getElementsByTagName把所有的input对象取出来, //这是这个问题的关键性的地方,用ByTagName而不是ByName. var list = document.g
-
js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 <style type="text/css"> *{margin: 0;padding: 0;} #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 2
-
js改变embed标签src值的方法
本文实例讲述了js改变embed标签src值的方法.分享给大家供大家参考.具体分析如下: 今天有一需求,一堆视频,一堆链接,点击相关的链接,在本页打开相关的视频. 第一想法,很简单么,直接把src值改成点击的那个的href值就可以了. 试了下,发现这样不行,视频该怎么放还是怎么放,永远是刚打开那个. 第二想法,给embed外面加个标签,把里面内容清空,再写进去,这样总可以了吧. 试了下,和上面一样,依旧不行. 又试了许多类似方法,还是不行. 最后,想的,把embed标签隐藏(display:no
-
thinkPHP2.1自定义标签库的导入方法详解
本文详细讲述了thinkPHP2.1自定义标签库的导入方法.分享给大家供大家参考,具体如下: TP的手册似乎跟不上节奏, 对自定义标签只是寥寥几句, 摸索了N久, 终于将自定义的标签进行了导入. 心得如下: 1. 情况: 新建自定义的标签库类: @.Mylib.Tag.TagLibTest - 懂TP的应该知道这代表的路径 使用Examples下的Tag演示文件 <?php // +--------------------------------------------------------
-
thinkphp使用literal防止模板标签被解析的方法
本文实例讲述了thinkphp不解析标签直接输出,防止模板标签被解析的方法.分享给大家供大家参考.具体实现方法如下: 在ThinkPHP中可以使用literal标签来防止模板标签被解析,例如: 复制代码 代码如下: <literal> <if condition="$name eq 1 "> value1 <elseif condition="$name eq 2"/>value2 <else /> value3 &l