【Angular】——封装并发布组件

非本人文章

于 2017-06-18 21:48:09 发布

阅读量8.3k

点赞数 3

分类专栏： Angular

本文链接：https://blog.youkuaiyun.com/onlybymyself/article/details/73441060

版权

本文介绍了如何在Angular中封装组件，包括设置组件的输入@Input()和输出@Output()，以及组件的目录结构和代码示例。接着，详细阐述了组件的发布流程，包括注册npm账号、创建package.json和index.js文件，以及执行npm publish命令。最后，讲解了引用者如何导入并使用发布的组件，强调了组件复用和减少项目体积的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、封装组件

作为入门，这是一个非常简单的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

最低0.47元/天解锁文章