1.输入属性：从父组件到子组件。
当应用启动时，Angular 会从根组件开始启动，并解析整棵组件树，数据由上而下流下下一级子组件。
Input 装饰器支持一个可选的参数，用来指定组件绑定属性的名称。如果没有指定，则默认使用 @Input 装饰器，装饰的属性名。具体示例如下：
使用装饰的属性名：
分三步
1、编写子组件组件。ts文件
在这里声明变量开接受父组件的传值，并且用@Input装饰器来装饰，必须一个变量用一个装饰器来装饰。
然后引入Input装饰器依赖库import
import{Component, Input, OnInit}from'@angular/core';@Component({selector: 'app-input', templateUrl: './ponent.html', styleUrls: ['./ponent.css']})export classInputComponentimplementsOnInit {@Input()fa:string; @Input()changliang:string;constructor() { }ngOnInit() {}}
2.编写子组件模板，也就是html将接收到的参数显示在模板上
<p> 接收到{{fa}}</p><p> 接收到{{changliang}}</p>
3.编写父组件ts。这里主要是定义一个变量。然后再将变量赋值传给后台
import{ Component }from'@angular/core';@Component({selector: 'app-root', templateUrl: './ponent.html', styleUrls: ['./ponent.css']})export classAppComponent {publictitle:string="父到子";}
4.编写父组件模板html
这里在子组件的选择器上绑定属性来传值。属性绑定的是子组件用@Input装饰的装饰的变量这样就能读取父组件绑定的属性值了。
属性绑定的右边等号可以是常量也可以是变量
<p>{{title}}</p><div> <app-input [fa]="title" [changliang]="900"></app-input></div>
这是一种使用方法也是最简单的
另一种可选参数的：
1.子组件ts:
import{Component, Input, OnInit}from'@angular/core';@Component({selector: 'app-input', templateUrl: './ponent.html', styleUrls: ['./ponent.css']})export classInputComponentimplementsOnInit {@Input()fa:string; @Input()changliang:string; // 可选参数 @Input("value")can:stringconstructor() { }ngOnInit() {}}
2.子组件模板
<p> 接收到{{fa}}</p><p> 接收到{{changliang}}</p><p> 接收到{{can}}</p>
3.父组件ts
import{ Component }from'@angular/core';@Component({selector: 'app-root', templateUrl: './ponent.html', styleUrls: ['./ponent.css']})export classAppComponent {publictitle:string="父到子";publickexuan:string="可选";}
4、父组件模板
<p>{{title}}</p><p>{{kexuan}}</p><div> <app-input [fa]="title" [changliang]="900" [value]="kexuan"></app-input></div>
最后这一种：（最后两种只能二选一）
import{Component, Input, OnInit}from'@angular/core';@Component({selector: 'app-input', templateUrl: './ponent.html', styleUrls: ['./ponent.css'], inputs:['count:value']})export classInputComponentimplementsOnInit {@Input()fa:string; @Input()changliang:string; // 可选参数 // @Input("value") // can:string; count:string='0';constructor() { }ngOnInit() {}}
总结：
1.在构造函数中是获取不到输入属性的值
在子组件的构造函数中，是无法获取输入属性的值，只能在 ngOnChanges 或 ngOnInit 钩子中获取到。因为子组件的构造函数会优先执行，当子组件输入属性变化时会自动调用 ngOnChanges 钩子，然后在调用 ngOnInit 钩子，所以在 ngOnInit 钩子内能获取到输入的属性。
具体详情可参考 -Angular 2 constructor & ngOnInit
2.不能同时使用 @Input 装饰器 或在 @Directive、@Component inputs 字段中定义同一个输入属性，具体示例如下：
@Component({selector: 'exe-counter',inputs:['count:value'] })export class CounterComponent {@Input('value') count: number = 0;}
3.@Input vs inputs
相同点：
它们都是用来定义输入属性
异同点：
inputs 定义在指令的 metadata 信息中，开发者对指令的输入属性一目了然。此外对于未选用 TypeScript 作为开发语言的开发者，也只能在 metadata 中定义指令的输入属性。
@Input 属于属性装饰器，通过它我们可以一起定义属性的访问描述符 (public、private、protected)：
@Input()publicattr:string;
4.输入、输出属性风格指南
4.1 坚持使用 @Input 和 @Output ，而非 @Directive 和 @Component 装饰器的 inputs 和 outputs 属性：
易于在类里面识别哪些属性是输入属性或输出属性。
4.2 坚持把 @Input 或者 @Output 放到所装饰的属性的同一行：
如果需要重命名与@Input或者@Output关联的属性或事件名，你可以在一个位置修改。
4.3 避免为输入和输出属性指定别名
同一个属性有两个名字（一个对内一个对外）很容易导致混淆。
详细信息请参考 -Angular 2 风格指南 - STYLE 05-12
5.项目开发中尽量通过 @Input 装饰器定义无状态的组件，即组件仅依赖于输入属性，这样会大大提高组件可复用性
