元数据

selector参数:CSS标签选择器

template参数:用于定义组件的模板,一个组件只能使用一个模板.

*如果使用外部模板则通过URL的形式进行引入.

自定义模板则涉及数据绑定的概念.

数据绑定方式

1.插值(适用于自身模板与组件类中的数据绑定) 

直接使用组件类中的属性.

templage: <p>{{属性名}}</p>

2.属性绑定(适用于父组件的模板往子组件类中数据的绑定)

<ele [子组件属性名]="data">

3.事件绑定(适用于子组件的模板往父组件类中数据的绑定)

把子组件的模板里产生的数据通过函数调用的方式传递到父组件类中.

<input (keyup) = "handle($event)">

*当keyup事件触发时则调用组件实例中的handle方法.

4.双向绑定

实现数据的双向流动

<input [(ngModel)] = "属性名">

Angular的组件由Component装饰器以及组件类组成.

组件的业务逻辑都是在组件类中进行编写.

组件=Component装饰器+组件类

装饰器的语法

@装饰器名({参数名:参数值})

*装饰器中的元素叫做元数据

组件类的语法

export class 组件类名{

private 属性名: 属性类型

//构造器

constructor(){

         this.属性名 = 'Hello World';

}

}

*装饰器的作用是将元数据注入到组件类中.

当定义了组件类后,Augular并不知道怎么解析这个类,如果在类中使用装饰器进行修饰,那么装饰器就会在运行的时候把其元数据中的参数注入到组件类中,此时Angular就能识别出组件类.

组件的生命周期

Constructor(构造器):用于对组件中的元素进行初始化操作--》第一次OnChanges事件被触发(用于接收父组件传入的数据)--》组件初始化阶段--》运行间OnChanges事件被触发--》组件销毁时触发OnDestroy

*只要组件的输入数据发生变化既会触发一次OnChange事件.

组件与组件之间通过树形结构进行关联,每个组件都能设置输入和输出属性来构造关系,负责与上下游的组件进行交互.

页面由不同的组件渲染组成,每个组件都有自己的JavaScript逻辑、html元素、css样式,每个组件都能完成各自的功能.

文件模块使用

文件模块Module

自定义指令

数据绑定方式

模板 template

插值interpolation

父子组件通讯

（1）通讯前提：定义输入属性

（2）首先接收数据则导入Input装饰器，发送数据则导入Output，EventEmitter

（3）使用Input装饰器

@Input() private message : string;

发送端设置：[message]="msgToChild"

（4）使用Output装饰器

声明：@Output() private outer = new EventEmitter<string>();

发送数据：outer.emit('something');

接收端接收代码:(outer="receive($event)")

服务使用

（1）建立xxx.service.ts

（2）在模块（app.module.ts）中引入，同时在providers中注入依赖（引入服务）

（3）在组件导入服务类

自定义指令使用

（1）建立xxx.directive.ts文件，在@Directive下的selector中声明标签名。

（2）通过导入ElementRef、Renderer辅助元素的渲染

 constructor(el : ElementRef, render : Renderer){

 render.setElementStyle(el.nativeElement, 'backgroundColor','yellow');

}

（3）在模块中引入指令，同时在declarations中引入指令。

（4）在组件中通过标签名引用自定义指令

（1）tsconfig.json :typeScript编译器的配置文件

（2）代码放在app目录下

（3）组件文件xxx.component.ts

（4）selector声明标签名，templateUrl声明外链模版文件

（5）模块文件xxx.module.ts

（6）模块文件中在declarations，bootstrap将【组件】定义到模块里

（7）启动文件main.ts,将声明的模块导入到这个文件，通过platformBrowserDynamic()动态引导启动，最后在这里导入依赖库

reflect-metadata(动态引导)，zone.js(浏览器异步事件)

（8）在webpack.config.js声明上述的启动文件的路径，在index.html通过script引入webpack.config.js打包出来的bundle.js（<script src="./bundle.js"></script>）

(9)在index.html中使用根组件my-app