Angular 封裝并發(fā)布組件的方法示例
一、封裝組件
作為入門，這是一個非常簡單的demo，但核心的接收使用者的輸入@Input()，以及返回數(shù)據(jù)給使用者@Output()都實現(xiàn)了，所以有一定的借鑒意義。
目錄結(jié)構(gòu)：（部分目錄不是框架中自動生成，二是后期添加，按照步驟進行即可。）
具體代碼：
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>
對應(yīng)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;
}
}
點擊查詢后效果如：
二、發(fā)布，供大家引用
1、注冊npm賬號：
2、手動或者命令創(chuàng)建package.json文件
內(nèi)容包括：
3、手動或命令創(chuàng)建index.js文件
在添加內(nèi)容前，我們調(diào)整組件的目錄結(jié)構(gòu)，如最上圖所示，這是規(guī)范的目錄結(jié)構(gòu)，調(diào)整好后，添加index.js內(nèi)容：
export * from './lib/search.module';
4、手動或命令創(chuàng)建index.d.ts文件
export {SearchModule} from './search.module';
5、Ctrl+Shift+右擊（在search組件目錄下）
運行：npm login
輸入賬號、密碼、郵箱
登錄成功后：運行npm publish
至此發(fā)布完成。
三、引用者調(diào)用：
1、Ctrl+Shift+右擊（項目根目錄）
cnpm install ng-itoo-search
2、引入到項目中
自己的Module中
3、自己的Html中：
<app-search [information]="information" [url]="url " (editData)="query($event)"></app-search>
4、對應(yīng)的ts中：
注意：
框中的url和ts中保持一致即可，并非必須寫url,自己定義。
OK，現(xiàn)在完整的一個組件就開發(fā)、發(fā)布完成了。這樣就可以讓其他開發(fā)人員引用了。通過這樣的封裝，既可以實現(xiàn)代碼的復(fù)用，又會減少項目打包的體積......是Angular的一大優(yōu)點。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了AngularJS基礎(chǔ)知識,包括AngularJS定義和特點以及構(gòu)建AngularJS應(yīng)用的方法，推薦給大家。2014-12-12
AngularJS實現(xiàn)在ng-Options加上index的解決方法
這篇文章主要介紹了AngularJS實現(xiàn)在ng-Options加上index的解決方法,結(jié)合實例形式分析了AngularJS在ngOptions添加索引的操作步驟與相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-11-11
在 Angular 中使用 ViewChild 訪問子組件、指令或 D
這篇文章主要介紹了如何在 Angular 中使用 ViewChild 來訪問子組件、指令或 DOM 元素,在本教程中,您使用了 ViewChild 來從父組件類中訪問指令、子組件和 DOM 元素,需要的朋友可以參考下2024-08-08
Angularjs通過指令監(jiān)聽ng-repeat渲染完成后執(zhí)行腳本的方法
指令是angular的核心功能之一，用好了事半功倍，監(jiān)聽ng-repeat執(zhí)行狀態(tài)僅僅是它功能的冰山一角吧。下面這篇文章主要介紹了Angularjs通過指令監(jiān)聽ng-repeat渲染完成后執(zhí)行腳本的方法,需要的朋友可以參考下。2016-12-12
簡介AngularJS中使用factory和service的方法
這篇文章主要簡單介紹了AngularJS中使用factory和service的方法,主要針對自定義工廠和服務(wù)的創(chuàng)建來講,需要的朋友可以參考下2015-06-06
AngularJS實現(xiàn)樹形結(jié)構(gòu)(ztree)菜單示例代碼
這篇文章運用示例代碼給大家詳細介紹了利用AngularJS如何實現(xiàn)樹形結(jié)構(gòu)(ztree)菜單，文中僅用了幾行AngularJS代碼就是了這個功能，對大家日常開發(fā)很有幫助，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-09-09
通常我們需要使用管道實現(xiàn)對數(shù)據(jù)的格式化，下面這篇文章主要給大家介紹了關(guān)于Angular中管道操作符(|)的使用方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要為大家介紹了monaco?editor在Angular的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
angularJs中orderBy篩選以及filter過濾數(shù)據(jù)的方法
今天小編就為大家分享一篇angularJs中orderBy篩選以及filter過濾數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了在AngularJS中使用AJAX的方法,示例非常簡單,并不能完全體現(xiàn)出AJAX動態(tài)刷新的強大功能,需要的朋友可以參考下2015-06-06