Angular 2（六）： 输入属性、输出属性

输入属性

父组件单向向子组件中传值

  • 父组件：

    1
    2
    <div>我是父组件</div>
    <app-child [myVal]="val"></app-child>
    1
    val: string = '这是在父组件的控制器中赋值！';

  • 子组件

    1
    <div>{{myVal}}</div>
    1
    2
    3
    //在子组件中将“myVal”声明为输入属性
    //至此，父组件中的值就能直接传递给"myVal"了
    @Input() myVal;

输出属性

数据从子组件中发射，在父组件中捕获

  • 子组件：对外发射数据

    1
    2
    3
    4
    5
    6
    7
    ① @Output()   
    ② outObjName: EventEmitter<Product> = new EventEmitter();
    constructor(){
    ③    let prod: Product = new Product("joy",13);
    ④    this.outObjName.emit(prod);
    }
    • ①②表示声明一个输出属性（也可以说成输出对象），该属性具有发射数据的能力；
    • ②中，需要为声明的属性指明一个泛型，EventEmitter<泛型>。该泛型即是：对外发射的数据的类型；
    • ③生成一个符合规则的数据；
    • ④使用输出属性将数据发射出去（发射到父组件中）；
  • 父组件：接收来自于子组件的数据 
    1
    2
    <div>我是父组件</div>
    ④ <app-child (outObjName)="getDataFromChild($event)"></app-child>
1
2
3
4
5
① prodInParent : Product = new Product();
② getDataFromChild(ev:Product){
③    this.prodInParent = ev;
}

在Angular中，捕获子组件中发射的事件，和捕获原生的DOM事件是一样的操作。

  • ①中新建了了一个Product的实例，为接收数据做准备；
  • ②自定义函数，捕获从子组件中发射出来的指定类型的数据；
  • ③使用捕获到的数据
  • ④对子组件中发射事件进行监听，一旦捕获到，立即响应指定的操作（getDataFromChild）

补充说明：

  • 一般情况下，父组件中“捕获的事件名称”和子组件中“输出属性的名称”保持一致；
  • 如果需要给输出属性指定别名，可以：@Output(‘otherName’)。这时，在父组件中④的位置outObjName需要与otherName相同；

中间人模式：

  • 简单来说，使用一个公共的父组件来连通两个不相关的组件，使之间的数据和事件响应在一定程度上得到关联；
  • 使用中间人模式既实现既定功能，也实现了组件之间的解耦；