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

一、封装组件

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

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

具体代码:

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;
 }
}

点击查询后效果如:

二、发布,供大家引用

1、注册npm账号:

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

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

内容包括:

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中

3、自己的Html中:

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

4、对应的ts中:

注意:

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

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

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

您可能感兴趣的文章:

  • 将angular-ui的分页组件封装成指令的方法详解
  • 详解如何将angular-ui的图片轮播组件封装成一个指令
  • 详解angular2封装material2对话框组件
(0)

相关推荐

  • 详解angular2封装material2对话框组件

    1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍.这里提供一个方案用于封装我们最常用的alert和confirm组件. 2. 官方使用方法之alert ①编写alert内容组件 @Component({ template : `<p>你好</p>` }) export class AlertComponent { constructor(){ } } ②在所属模块上声明 //必须声明两处 declarations: [ AlertComp

  • 将angular-ui的分页组件封装成指令的方法详解

    准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css.... 首先抛出几个问题: a):何时回用到分页 (当后端返回的数据过多,一页装不满时,我们必须要采取分页的效果,给用户良好的视觉效果) b):分页一般要传递哪些数据 (总的数据数量,每页固定显示多少条数据,当点击分页时候返回当前的页码.......这三条是必须的) 第一步:先完成指令的封装 我会

  • 详解如何将angular-ui的图片轮播组件封装成一个指令

    在项目开发中我们经常会遇到图片轮播的功能点: 如果我们开发人员自己原生手写,将会花费很多的时间,最终得不偿失. 接下来就详细说说如何使用angular-ui发热图片轮播模块,并且将它写成一个指令(便于复用) 一如既往的我们项目中使用时requireJS进行js代码的编译 准备工作: 1):引入angularJS , ui-bootstrap-tpls-1.3.2(我使用的是1.3.2版本的) 第一步:自己写一个指令(命名为picchange) 说明:指令控制器中的代码都是angualr-ui官网

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

    一.封装组件 作为入门,这是一个非常简单的demo,但核心的接收使用者的输入@Input(),以及返回数据给使用者@Output()都实现了,所以有一定的借鉴意义. 目录结构:(部分目录不是框架中自动生成,二是后期添加,按照步骤进行即可.) 具体代码: html:(search.component.html) <input type="text" class="form-control" #info placeholder="{{informatio

  • Angular封装搜索框组件操作示例

    本文实例讲述了Angular封装搜索框组件操作.分享给大家供大家参考,具体如下: 后台管理系统多是以表格和表单为主,有列表就一定会有列表的筛选功能,所以在此把列表头部的搜索功能拆分出一个公共组件,方便使用. 大致样式如下图: 这里我使用的是ng-zorro蚂蚁金服的angular组件库 index.html: <div nz-form class="ant-advanced-search-form"> <nz-row [nzGutter]="24"

  • svgicon组件使用方法示例详解

    目录 场景 编写SvgIcon组件 组件文件结构 icons文件结构 vue.config.js配置 最终效果 场景 最近在研发产品的过程中,ued切了很多svg的图片:咱们在使用过程中除了背景图再就是使用<img :src="url"/>进行使用. 在你进行公共组件编写的时候,使用图片路径这种方式编写完组件发布之后:在再项目中引入已发布的组件,在你运行代码的时候图片路径会附带上当前运行的域名,导致图片显示不出来. 那么怎么解决这种问题呢? 和UED进行沟通让他们把这种sv

  • Vue自动构建发布脚本的方法示例

    简介 使用cross-env, scp2两个插件完成 cross-env cross-env这是一款运行跨平台设置和使用环境变量的脚本. 为什么需要cross-env? NODE_ENV=production 像这样设置环境变量时,大多数Windows命令提示符都会阻塞 .(Windows上的Bash是例外,它使用本机Bash.)同样,Windows和POSIX命令使用环境变量的方式也有所不同.对于POSIX,您可以使用: $ENV_VAR 和在Windows上可以使用 %ENV_VAR% .

  • Vue3 封装回到顶部组件的实现示例

    我们在网页中应该经常可以看到回到顶部这个功能,这个功能也比较简单. 代码: <template> <div class="page-content-scroll"> <el-backtop target=".page-content-scroll" > </el-backtop> <slot></slot> </div> </template> <script>

  • PHP使用redis消息队列发布微博的方法示例

    本文实例讲述了PHP使用redis消息队列发布微博的方法.分享给大家供大家参考,具体如下: 在一些用户发布内容应用中,可能出现1秒上万个用户同时发布消息的情况,此时使用mysql可能会出现" too many connections"错误,当然把Mysql的max_connections参数设置为更大数,不过这是一个治标不治本的方法.而使用redis的消息队列,把用户发布的消息暂时存储在消息队列中,然后使用多个cron程序把消息队列中的数据插入到Mysql.这样就有效的降低了Mysql

  • Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)

    有时候因为布局问题,需要子组件 把数据 传给父组件,并执行父级的某个方法,不多说上代码: 子组件: <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref=&

  • Yii Framework框架使用PHPExcel组件的方法示例

    本文实例讲述了Yii Framework框架使用PHPExcel组件的方法.分享给大家供大家参考,具体如下: PHPExcel下载地址http://www.yiiframework.com/extension/phpexcel 将下载的PHPExcel压缩包解压到Yii Framework目录framework\vendors下 代码如下 /** * 将数据导出到Excel */ public function actionExport() { //取要导出到Excel的数据 $criteria

  • java封装的概念和实现方法示例

    本文实例讲述了java封装的概念和实现方法.分享给大家供大家参考,具体如下: 封装:是将类的某些信息隐藏在类的内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问. 封装的好处: 只能通过规定方法访问数据 隐藏类的实现细节 方便加入控制语句 方便修改实现 经过封装的属性,不能直接访问,要通过公共属性get/set方法访问. 代码: package com.jredu.oop.ch01; /** * 某公司要开发内部的 "办公管理信息系统",请使用面向对象的思

  • 动手写一个angular版本的Message组件的方法

    学习一个框架或库的最好方法是看官方文档,并着手去写例子.最近在利用空闲的时间学习angular,那今天就尝试写一个message组件,并通过message服务动态加载message组件. 我所参与的项目基本是用jquery完成的.之前,在项目中自己动手写过一个简单的message插件,样子如下图. 那现在就使用angular(版本5.0.0)来实现message组件. message组件 message组件要根据传入的类型.消息和duration来显示.创建三个文件:message.compon

随机推荐