angular4输入属性@input

1.输入属性：从父组件到子组件。

当应用启动时，Angular 会从根组件开始启动，并解析整棵组件树，数据由上而下流下下一级子组件。

Input 装饰器支持一个可选的参数，用来指定组件绑定属性的名称。如果没有指定，则默认使用 @Input 装饰器，装饰的属性名。具体示例如下：

使用装饰的属性名：

分三步

1、编写子组件组件。ts文件

在这里声明变量开接受父组件的传值，并且用@Input装饰器来装饰，必须一个变量用一个装饰器来装饰。

然后引入Input装饰器依赖库import

import {Component, Input, OnInit} from '@angular/core';@Component({  selector: 'app-input',  templateUrl: './input.component.html',  styleUrls: ['./input.component.css']})export class InputComponent implements OnInit { @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: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  public title: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: './input.component.html',  styleUrls: ['./input.component.css']})export class InputComponent implements OnInit { @Input() fa:string; @Input() changliang:string; // 可选参数  @Input("value")  can:string    constructor() { }  ngOnInit() {  }}

2.子组件模板

<p>  接收到{{fa}}</p><p>  接收到{{changliang}}</p><p>  接收到{{can}}</p>

3.父组件ts

import { Component } from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  public title:string="父到子";  public kexuan: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: './input.component.html',  styleUrls: ['./input.component.css'],  inputs:['count:value']})export class InputComponent implements OnInit { @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() public attr: 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 装饰器定义无状态的组件，即组件仅依赖于输入属性，这样会大大提高组件可复用性