一、Angular 6.0
1.1样式
html中引入样式：内嵌式，外链式，行内式。
ng6中组件引入样式的方式也有三种：
外链式
ng6中，已经将css预编译语言配置出来了，因此我们可以直接使用他们
在组件注解类中，通过styleUrls引入样式文件，是一个数组，可以引入多个文件
如果引入的是.css文件，就是css语法
如果引入的是.less文件，就是less语法
如果引入的是.scss文件，就是.scss语法
...
不论是哪种文件，我们都要遵守组件命名规范， 名称.componnet.拓展
内嵌式
在组件注解类中，通过styles引入样式，是一个数组，可以定义多块样式
行内式
我们可以通过style属性定义行内式字符串
注意：内嵌式样式styles和外链式样式styleUrls，不能同时使用
shadow DOM样式
ng6实现的样式是一个shadow DOM样式，组件内部的样式，是不会应用给组件外部的元素的
| 1 // 外链式样式 2 styleUrls: ['./app.component.less', './app.component.scss', './app.component.css'], 3 // 内嵌式样式 4 styles: [ 5 ` 6 h1 { 7 color: pink; 8 } 9 ` 10 ] |
1.2动态设置样式
ng6中，我们也可以动态的设置样式，有两种语法，
第一种 [style.样式名称]=”样式值”
每次只能设置一个样式，为了避免css注入
第二种 [ngStyle]=”{}”
这里的ngStyle是一个指令
每次可以添加多个样式，对象中属性名称要驼峰式命名
两种方式属性值都是js环境，因此可以使用变量，字符串要加引号
我们可以在组件类中，定义这些数据
注意：两种方式都是用了中括号，因此中括号是ng6中的一个语法糖，作用是用来动态设置属性，元素的所有属性都可以使用[]语法糖（包括后面讲解的指令）
| 1 template: ` 2 <h1 [title]="title" [style.color]="'red'" [style.background]="color" [ngStyle]="{ 3 fontSize: '100px', 4 height: '200px' 5 }">爱创课堂</h1> 6 <h2>{{title}} {{color.toUpperCase()}}</h2> 7 `, |
1.3插值
想在模板中的元素内使用组件中的数据，我们需要一个js环境，可以通过插值实现
语法 {{}}
插值语法提供了js环境，因此可以使用js表达式
1.4事件
vue中：@click=”fn()”
react中：onClick=”fn()”
ng6中绑定事件，我们通过圆括号语法糖绑定
(click)=”fn()”
事件回调函数定义在组件类中
默认没有参数，使用什么参数可以传递什么参数，使用事件对象，要传递$event
作用域是组件实例化对象
作用域是无法改变的，想改变作用域，我们可以将回调函数嵌入在一个函数中，绑定这个新函数，在执行时候，改变原来回调函数作用域。
ng6中，事件是直接绑定给元素的，没有实现事件委托模式，事件对象是一个源生的事件对象，ng6并没有处理
| 1 template: ` 2 <h1 [title]="title" [style.color]="'red'" (click)="clickDemo($event)">爱创课堂</h1> 3 <h2>{{title}} {{color.toUpperCase()}}</h2> 4 `, |
1.5临时模板变量
ng6允许我们在模板中定义临时变量,用#语法糖
语法 #变量名称
我们直接在元素上添加#属性，就可以定义变量了
变量可以赋值（指令）
如果没有赋值，则代表该元素（是源生的DOM元素，要使用源生API操作），我们可以通过该变量访问这个元素
临时模板变量只是在模板中存在，一旦模板渲染完成，临时模板变量就被销毁，所以我们不能在组件中使用
想在组件中查看该变量，我们可以将其传递给事件回调函数存储
1.6事件修饰符
我们可以为键盘事件定义修饰符，来方便为某个按键绑定事件
语法 事件名称.修饰符=”事件回调函数()”
此时获取输入框的内容，有两种方式
第一种，通过事件对象：e.target.value获取
第二种，通过临时模板变量: inp.value获取
1.7 change事件
对于输入框元素，我们可以绑定change事件，但是绑定的一个源生的change事件
就有浏览器兼容性问题了，当触发内容更新的时候，会执行，每个浏览器是不一样的
例如：chrome认为输入框失去焦点时候才会触发change事件，与blur事件类似了
| 1 template: ` 2 <h1 #titleDOM [title]="title" [style.color]="'red'" (click)="clickDemo($event, titleDOM)">爱创课堂</h1> 3 <h2 [title]="titleDOM.innerHTML" [style.color]="titleDOM.style.color">{{title}} {{color.toUpperCase()}}</h2> 4 `, |
1.8自定义组件
有时候我们需要更多的组件，所以我们要自定义组件，ng6为了简化我们定义组件，提供了指令，可以通过ng指令，快速创建组件
ng g component demo
注意：一定要进入项目的根目录再执行执行。
此时创建了四个文件，并且新增了一个文件
四个新增文件：.css, .html, .spec.ts, .ts
修改了app.module.ts文件
全局声明了组件，所以我们就可以在各个位置使用组件了
&nbs