@Input输入属性，实现数据父子组件绑定的案例

ng new demo

ng g componemt order

1、首先需改order组件的order.component.ts

2、修改order.component.html

<div>我是子组件</div>
<div>我要买{{hue}}个颜色的{{dior}}口红</div>

 

3、修改app.component.ts

export class AppComponent {
  aaa = "";
}

 

4、修改app.component.html

<div>我是父组件</div>
<div>
  <input type="text" placeholder="请输入" [(ngModel)]="name">
  <app-order [dior]="name" [hue]="10"></app-order>
</div>

输入属性：被input装饰器注解的属性，用来从父组件来接收数据，
特性：父组件的值改变会影响到子组件，子组件的值变化，不会影响到父组件