本篇文章为大家展示了Angular中怎么封装一个并发布组件，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
创新互联建站服务项目包括宿州网站建设、宿州网站制作、宿州网页制作以及宿州网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，宿州网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到宿州省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
一、封装组件
目录结构：（部分目录不是框架中自动生成，二是后期添加，按照步骤进行即可。）
具体代码：
html：(search.component.html)
查询
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();
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中引入如下看看效果：
{{information}}
{{dataUrl}}
