Angular 封装并发布组件的方法示例


Posted in Javascript onApril 19, 2018

一、封装组件

作为入门,这是一个非常简单的demo,但核心的接收使用者的输入@Input(),以及返回数据给使用者@Output()都实现了,所以有一定的借鉴意义。

目录结构:(部分目录不是框架中自动生成,二是后期添加,按照步骤进行即可。)

Angular 封装并发布组件的方法示例

具体代码:

html:(search.component.html)

<input type="text" class="form-control" 
    #info placeholder="{{information}}" > 
   
<button type="button" class="btn btn-default" 
    (click)="query(info.value);">查询</button> 
 
 
css:(search.component.css) 
 
.form-control{ 
 float: left; 
 width: 70%; 
} 
 
.btn btn-default{ 
 background-color: #41ABE9; 
}

ts:(search.component.ts)

import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; 
@Component({ 
 selector: 'app-search', 
 templateUrl: './search.component.html', 
 styleUrls: ['./search.component.css'] 
}) 
export class SearchComponent implements OnInit { 
 @Input() information: string;   
 @Input() url: string; 
 dataUrl: string; 
 @Output() editData = new EventEmitter<any>(); 
 
 constructor() { } 
 ngOnInit() { 
 } 
 query(info: string) { 
  this.dataUrl = this.url + '/' + info; 
  this.editData.emit(this.dataUrl); 
 } 
}

解释:@Input,接收信息。如information可以接收Html中的{{information}}的值

@Output是输出。即引用组件化的人可以拿到editData的返回值。

module:(search.module.ts)

import {SearchComponent} from './search.component' ; 
import {CommonModule} from '@angular/common'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
 
@NgModule({ 
 declarations: [ 
  SearchComponent 
 ], 
 imports: [ 
  CommonModule, 
  FormsModule, 
  HttpModule, 
 ], 
 providers: [], 
 exports: [SearchComponent], 
}) 
export class SearchModule { }

至此组件完成,可以通过在app.component.html中引入如下看看效果:

<h1> 
 {{information}} 
 {{dataUrl}} 
</h1> 
<div style="width: 300px;padding-left: 5px"> 
<app-search [information]="information" [url]="url" (editData)="query($event)"></app-search> 
</div>

对应app.component.ts中需要定义:

import { Component } from '@angular/core';  
@Component({ 
 selector: 'app-root', 
 templateUrl: './app.component.html', 
 styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
 information = '输入班级名称'; 
 url= 'Class/find'; 
 dataUrl: string; 
 query(info: any) { 
  this.dataUrl = info; 
 } 
}

点击查询后效果如:

Angular 封装并发布组件的方法示例

二、发布,供大家引用

1、注册npm账号:

地址:https://www.npmjs.com

2、手动或者命令创建package.json文件

内容包括:

Angular 封装并发布组件的方法示例

3、手动或命令创建index.js文件

在添加内容前,我们调整组件的目录结构,如最上图所示,这是规范的目录结构,调整好后,添加index.js内容:

export * from './lib/search.module';

4、手动或命令创建index.d.ts文件

export {SearchModule} from './search.module';

5、Ctrl+Shift+右击(在search组件目录下)

    运行:npm login

    输入账号、密码、邮箱

    登录成功后:运行npm publish

    至此发布完成。

三、引用者调用:

1、Ctrl+Shift+右击(项目根目录)

cnpm install ng-itoo-search

2、引入到项目中

自己的Module中

Angular 封装并发布组件的方法示例

3、自己的Html中:

<app-search [information]="information" [url]="url " (editData)="query($event)"></app-search>

4、对应的ts中:

Angular 封装并发布组件的方法示例

注意:

Angular 封装并发布组件的方法示例

框中的url和ts中保持一致即可,并非必须写url,自己定义。

OK,现在完整的一个组件就开发、发布完成了。这样就可以让其他开发人员引用了。通过这样的封装,既可以实现代码的复用,又会减少项目打包的体积......是Angular的一大优点。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript FormatNumber函数实现方法
Dec 30 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
小程序实现列表删除功能
Oct 30 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 Javascript
angular第三方包开发整理(小结)
Apr 19 #Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 #Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 #Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 #Javascript
原生js实现拖拽功能基本思路详解
Apr 18 #Javascript
一个基于react的图片裁剪组件示例
Apr 18 #Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 #Javascript
You might like
德生H-501的评价与改造
2021/03/02 无线电
用PHP连接Oracle数据库
2006/10/09 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
PHP如何使用Memcached
2016/04/05 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
JavaScript实现大数的运算
2014/11/24 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
JS实现简单表格排序操作示例
2017/10/07 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
详解Python的单元测试
2015/04/28 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python管理Windows服务小脚本
2018/03/12 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
关爱留守儿童倡议书
2014/04/15 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
立项申请报告范本
2015/05/15 职场文书
投诉信格式范文
2015/07/02 职场文书
大学生受助感言
2015/08/01 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python