前言

大家再用angular的时候都知道它有种种好处，其中一个就是组件化，下面介绍一下它的简单应用

//component.ts页面会写这样的装饰器
@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})

• 1
• 2
• 3
• 4
• 5
• 6

• 在启动angular时，会通过index.html页面调用显示页面的装饰器，然后显示其相应的HTML页面，css页面等
  
• 这里正对应了我们上面selector：‘app-root’
• 其实这可以理解为我们为component起了一个名字，当我们用到这个组件的时候，就叫它的名字

封装

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

• 1

• 有时候我们会在页面看到类似于这样的组件封装，当它可以共用于多个页面，我们可以将整个模块发布可以让大家共用
• 例如上面的app-search发布了以后我们就可以从node-module里找到，直接下载并引用就可以在HTML页面直接用
  

<!--HTML页面搜索框-->
<form>
<input maxlength="30" onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\+\#\.\-\()\（）]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" type="text" class="form-control" style="float: left;width: 70%"#info placeholder="{{information}}" >
&nbsp;&nbsp;&nbsp;&nbsp;
<button type="submit" class="btn btn-default"(click)="query(info.value);">查询</button>
</form>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

//装饰器内容
@Component({selector: 'app-search',templateUrl: './search.component.html',styleUrls: ['./search.component.css']
})

• 1
• 2
• 3
• 4
• 5
• 6

• 我们在其他页面使用的时候可以再HTML页面将组建选择器的名字以标签的形式引用

小结

• 我们可以自己练习发布一个angular的模块，进行再其他页面进行使用
• 这里没有详细介绍，大家自己查资料吧！