Component组件基本概念

Component组件的必备元素

1.装饰器：@Component()

    用来告知Angular如何处理TypeScript类，包括多个属性，属性值叫做原数据，Angular框架根据原数据值渲染组件并执行组件的逻辑。

2.模板：Template

    定义组件外件，以html形式存在，告知Angular如何渲染组件，可以在模板中使用Angular数据绑定语法来呈现控制器中的数据

3 控制器：Controller

   普通的TypeScript类，被装饰器装饰，包含组件所有的属性和方法，大多数界面的逻辑也写在控制器中，控制器通过数据绑定和模板通信，模板展现控制器的数据，控制器处理模板上发生的事件。

对应代码讲解：

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',//组件可以通过app-root标签调用
  templateUrl: './app.component.html',//
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

解释：1）第一行impotr：从angular核心模块中引入了名为Component装饰器；

         2）第二行至第六行@Component：用装饰器定义了组件以及组件的原数据；//装饰器中的内容为原数据

         3）AppComponent：一个普通的typescript类；

Component可选属性：

1.输入属性：@Inputs()

  用来接收外部传入数据，使得父组件可以直接传数据给子组件；

2.提供器：providers

  用来做依赖注入；

3.生命周期钩子：Lifecycle Hooks

  组件从创建到销毁的过程中，可以有多个钩子触发；

4.样式表：styles

  提供组件专用样式；

5.动画：Animations

   方便创建与组件相关的动画效果，如入和出效果；

6.输出属性：@Outputs

   用来定义其他组件可能感兴趣的事件，和组件间共享数据。