文章内容
2017/11/15 22:30:28,作 者: 黄兵
2、Angular 学习 - 创建组件
Angular起初是以Web Component标准为蓝本进行设计的，在Angular中引入了视图包装（ViewEncapsulation）的概念，允许通过设置ViewEncapsulation.Navtive来使用原生的Shadow DOM.
首先上一段代码，如下：
import {Component} from '@angular/core';
@Component({
selector:'contact-item',
template: '<div><p>黄兵</p><p>13429950072</p></div>'
})
export class ContactItemComponent{}
以上代码创建了一个简单的Angular组件。使用这个组件，需要在HTML中添加自定义标签，然后Angular便会在此标签中插入ContactItemComponent组件中指定的模板。
在HTML中使用ContactItemComponent组建的示例代码如下：
<div>
<contact-item></contact-item>
</div>
templateUrl
templateUrl是为组件指定一个外部的URL地址，示例代码如下：
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})styleUrls
styleUrls是为组件指定一个外部样式文件，示例代码如下：
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})关于内部央视和外部样式，同css规则相同，即行内样式权重>外联样式
双向数据绑定
Angular提供了控制双向数据绑定的功能，这个功能在用户输入的时候很有用，语法：
[(ngModel)]="property"
双向数据绑定示例代码如下：
<div>
<input type="text" value="{{name}}" [(ngModel)]="name" />
<p>{{name}}</p>
<p>{{phone}}</p>
</div>
输入框绑定了name属性，当用户输入时内容发生改变，Angular的双向数据绑定将会输入内容同步到新name属性，并且会同步显示到<p>{{name}}</p>上。
以上就是组件的简单介绍。
后面的文章将会详细的介绍组件的具体内容。
黄兵的个人博客。
转载请注明出处：黄兵的个人博客 - Angular 2 组件
参考资料：揭秘Angular 2
广发证券互联网金融技术团队 著
ISBN:978-7-121-30650-1
评论列表