前一篇文章中已经提到了如何新建组件，我们可以通过命令 ng g component Components /组件名 来创建一个组件，通过这种方式，就会自动帮我们在跟模块里面配置好，不需要我们手动配置。这篇文章我们来看一下这个业务逻辑，以及如何把数据绑定到模版上。
上一篇文章中已经说到了，我们新创建组件之后，可以在组件的ts文件中声明数据
news.component.html
export class NewsComponent implements OnInit {
public title = '我是新闻组件';
msg = '我是新闻组件的msg'; //当我们省略前边的public的时候默认是public
constructor() { }
ngOnInit(): void {
}
}
news.component.ts
之后在html中通过{{title}} {{msg}}来使用数据。
| 标题 | 声明属性的几种方式： |
|---|---|
| public | 共有 *（默认）可以在这个类里面使用，也可以在外面使用 |
| protect | 保护类型 他只有在当前类和它的子类里面可以访问 |
| private | 私有 只有在当前类才可以访问这个属性 |
当然我么你在定义数据属性的时候也可以不赋值，我们在下边的构造函数里面进行一个赋值。我们可以通过this来获取到属性，并且修改属性值，比如：
export class NewsComponent implements OnInit {
public title = '我是新闻组件';
msg = '我是新闻组件的msg'
username ='张三'
public userInfo:any = {
age: '20',
}
public student:any
constructor() {
this.student = 'lkc',
this.msg = '大西瓜' //当你在html中使用msg这个属性的时候，这个时候msg的属性值已经变成了大西瓜
}
ngOnInit(): void {
}
}
当我们要绑定属性的时候，我们通过一个 [] 来进行动态绑定。比如
<div title="我是一个div">
div
</div>
//当你把鼠标放上去之后会发现div会显示title的内容
解析html的时候我们同样需要用到[],不过需要我们在[]里面加上interHTML。比如，
//html模块
<div [interHTML]="car"></div>
//module模块
public car:any = '<h1>解析html</h1>'
接下来是定义数组
//我们在module里面定义数组,记得不要使用var来声明
arr = [1,2,3,4,5]
//当我们遍历数组的时候，我们使用 *ngFor 关键字来遍历
<ul>
<li *ngFor="let item of arr">
{{item}}
</li>
</ul>
对于复杂对象的遍历我们同样采取这种方式，如果是对象里面嵌套数组，然后数组里面还是对象这样的结构，
我们可以在外层ngfor遍历每个对象，然后在内层ngfor便利对象的数组来实现。
这一节的内容就到这里了，接下来还会继续围绕组件进行相关的介绍，下一篇文章再见👋
