前言
大家再用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}}" >
<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的模块,进行再其他页面进行使用
- 这里没有详细介绍,大家自己查资料吧!