Angular 封裝并發(fā)布組件的方法示例
一、封裝組件
作為入門，這是一個非常簡單的demo，但核心的接收使用者的輸入@Input()，以及返回數(shù)據(jù)給使用者@Output()都實現(xiàn)了，所以有一定的借鑒意義。
目錄結(jié)構(gòu)：（部分目錄不是框架中自動生成，二是后期添加，按照步驟進(jìn)行即可。）
具體代碼：
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)文章
Angular.js中ng-include用法及多標(biāo)簽頁面的實現(xiàn)方式詳解
這篇文章主要給大家介紹了在Angular.js中ng-include用法及多標(biāo)簽頁面的實現(xiàn)方式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，相信對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
本文是小編日常收集整理的關(guān)于：AngularJS中最重要的核心功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-07-07
這篇文章主要給大家介紹了angularjs中ng-attr的用法,文中通過實例代碼介紹的很詳細(xì)，有需要的朋友可以參考借鑒，下面來一起看看吧。2016-12-12
這篇文章主要介紹了詳解Angular5路由傳值方式及其相關(guān)問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了AngularJS表單驗證功能,結(jié)合具體實例形式分析了AngularJS表單驗證的操作步驟、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2017-05-05
這篇文章主要給大家介紹了關(guān)于angular實現(xiàn)頁面打印局部功能的思考與方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
Angular CLI在Angular項目中如何使用scss詳解
angular-cli自身支持Scss預(yù)處理器，Scss比css更加方便靈活，而且層次清晰，代碼整潔。下面這篇文章主要給大家介紹了關(guān)于Angular CLI在Angular項目中如何使用scss的相關(guān)資料，需要的朋友可以參考下。2018-04-04
今天小編就為大家分享一篇Angular2之二級路由詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
AngularJS基礎(chǔ) ng-non-bindable 指令詳細(xì)介紹
本文主要講解AngularJS ng-non-bindable 指令,這里幫大家整理了ng-non-bindable指令的基本知識資料,有需要的小伙伴可以參考下2016-08-08
本文主要介紹AngularJS 動畫,這里對動畫的資料詳細(xì)介紹并附有效果圖和代碼實例,有需要的小伙伴參考下2016-07-07