angular4监听输入框_Angular4 开发实战：(5） 组件通讯(@Input和@Output)

(1) 父到子

父到子的数据传递其实就是通过将子组件上的一个属性绑定到父组件的一个属性上，一般我们使用@Input()属性装饰器来实现。

我们依旧使用CardComponent和CardHeaderComponent两个组件：

// app/components/card-header/card-header.component.ts

@Input() title: string;

// app/components/card-header/card-header.component.html

{ {title}}

// app/demo/demo-input/demo-input.component.html

在上面的代码中，我们使用@Input()属性装饰器来声明输入属性tilte，然后就像内置属性一样将值赋值给[title]。

注：@Input()装饰器支持一个可选的参数，用来指定组件绑定属性的名称。如果没有指定，则默认使用@Input()装饰器后面的属性名：

@Input('bindingPropertyName')

我们还可以在组件/指令等装饰器的元数据中添加：

// card-header.component.ts

@Component({

inputs:['content']

})

export class CardHeaderComponent {

content: string;

}

// card-header.