Angular知识整合一：Angular中的组件和一些基本概念
什么是Angular？
Angular是一个基于TypeScript构建的开发平台，它包括一下三个部分：
- 一个基于组件的库
- 一组涵盖路由、表单管理、客户端服务端通信等各种功能继承的库
- 一套开发、构建、测试、更新代码的工具
Angular中的知识点
什么是组件
1、在Angular中，组件是构成应用的元素。
2、组件包括三个部分：带有@Component()装饰器的TypeScript类、HTML模板和样式文件
下面代码是一个最小化的Angular组件，七中@Component()装饰器会指定三个angular专属的信息：
- CSS选择器，在其他地方使用这个组件时，通过selector来使用
- HTML模板，定义当前组件的结构
- 一组CSS样式，用于定义当前组件HTML模板的样式
import { Component } from '@angular/core';
@Component({
selector: 'my-angular',
template: `自定义我的angular组件
`,
styles: [`color: #000`]
})
export class MyAngularComponent {
console.log('This is My-angular component!');
}
在其他模板中使用my-angular组件时，通过selector的值来引入该组件
<my-angular>my-angular>
当Angular渲染该组件时，生成的DOM如下所示：
<my-angular>
<h1>自定义我的angular组件h1>
my-angular>
什么是模板
组件的HTML模板，用于声明组件的渲染方式，可以在@Component()装饰器中使用template内联或者templateUrl引入外部文件
模板中使用插值
在Angular的模板文件中，可以通过双花括号的方式在组件模板中插入动态值：
<h1>{{text}}h1>
import { Component } from '@angular/core';
@Component({
selector: 'my-angular',
templateUrl: './my-angular.component.html',
})
export class MyAngularComponent {
var text = 'this is my angular!'
}
如上所示，HTML文件中，双花括号中的text的值来自对用的组件类。
Angular完成渲染之后用户实际看到的内容是this is my angular!
当组件类中text的值发生改变后，Angular会自动更新模板中已经渲染的DMO，通过这种方式，在开发中我们可以使用这种模板语法在页面中插入动态文本。
模板中使用属性绑定
在Angular的模板文件中，使用方括号的方式绑定Property和Attribute的值，使用圆括号指定事件名称来声明时间监听器：
<button [disabled]="canClick" [style.color]="btnColor" (click)="showMessage()">clickbutton>
import { Component } from '@angular/core';
@Component({
selector: 'my-angular',
templateUrl: './my-angular.component.html',
})
export class MyAngularComponent {
canClick = false;
btnColor = '#fff'
showMessage(){
alert('hello!');
}
}
模板中的指令
Angular中最常用的指令是*ngIf和*ngFor， 通过这两个指令，可以动态修改DOM结构。
在模板中使用*ngIf 指令：当showDiv的值为false时，Angular在渲染时会在DOM树种删除相关的节点。
<div *ngIf="showDiv">div>
在模板中使用*ngFor 指令：
一般在模板中渲染一组结构相同，内容相似的节点时，使用 *ngFor 指令，该指令会根据组件类中指定的一组内容循环渲染该节点
<div *ngFor="let a of arr">{{a}}div>
import { Component } from '@angular/core';
@Component({
selector: 'my-angular',
templateUrl: './my-angular.component.html',
})
export class MyAngularComponent {
arr = [1,2,3]
}
开发中 *ngFor 和 *ngIf 指令结合使用，能灵活的修改DOM结构，创建出色的用户体验。