angular2 组件之间传值及事件传递

简介

angular2及以后的版本（包括angular4）都称为angular。组件之间的传值主要分为父子组件间传值和兄弟组件传值两大类，其中父子组件传值又分为父组件向子组件传值和子组件向父组件传值两种。

一、父组件向子组件传值

1.1 示例一

父组件中把roleName传给子组件使用

parent.ts

parent.html

child.ts

child.html

以上四步即完成了一个父组件向子组件传值的操作。

1.2 示例二：拦截输入属性

子组件可以拦截输入属性的数据并进行相应的处理，即使用setter拦截输入属性或ngOnChanges监听数据变化，这里仅示例setter的方式

child.ts

1.3 父组件通过局部变量获取子组件引用

在父组件的模板中为子组件创建一个局部变量，这个父组件可以通过这个局部变量来获得读取子组件公共成员变量和函数的权限；模板局部变量的作用域范围仅存在于定义该模板局部变量的子组件。

parent.ts

child.ts

1.4 父组件使用@ViewChild获取子组件的引用

由于模板局部变量只能在模板中使用，而不能直接在父组件类中使用，这有一定的局限性，这里介绍一种更优雅的数据传递方式---@ViewChild。
当父组件需要获取子组件中变量或者方法的读取权限时，可以通过@ViewChild注入的方式来实现，组件中ViewChild的作用是声明对子组件元素的实例引用，它提供了一个参数来选择将要引用的组件元素，这个参数可以是一个类的实例，也可以是一个字符串，它们实现的功能一样，只是表现形式不同，具体如下：

• 参数为类实例，表示父组件将绑定一个指令或者子组件实例。
• 参数为字符串类型，表示将起到选择器的作用，即相当于在父组件中绑定一个模板局部变量，获取到子组件的一份实例对象的引用。

1.41 下面是第一种参数类型（其中ContactCollectComponent是子组件）:

parent.ts

• 1.42 当参数为字符串时
  • 在父组件中引入ElementRef
import { Component, OnInit, ElementRef } from '@angular/core';
  • 在父组件模版中自组件上加局部变量#xxxx
    
  • 在父组件类中如下操作
    @ViewChild('historysearch') historySearch: ElementRef;
  • 之后就可以在父组件中操作子组件的变量或方法类，比如
    this.historySearch['searchString'] = '';

二、子组件向父组件传值

2.1 示例一

子组件的输出属性onCollect传递给父组件，当父组件监测到子组件的onCollect动作时就会执行父组件中相应的方法，下面案例中同时父组件也把detail传给了子组件

child.ts

child.html

parent.html

parent.ts

2.2 示例二

子组件的联系人id传给父组件使用

child.html

child.ts

parent.html

parent.ts

父组件绑定的事件通过$event对象来访问num（即payload）的数据。

2.3 在子组件中获取父组件的引用

• 已知父组件的类型
  这种情况可以直接通过在构造函数中注入ParentComponent来获取已知类型的父组件引用，示例代码如下：

child.ts

• 未知父组件的类型
  一个组件可能是多个组件的子组件，有时候无法直接知道父组件的类型，在Angular中，可通过“类-接口”的方式来查找，即让父组件通过提供一个与“类-接口”标识同名的别名来协助查找。
  首先创建Parent抽象类，它只声明了name属性，没有实现（赋值），示例代码如下：

abstract

然后在ParentComponent组件的providers元数据中定义一个别名Provider，用useExisting来注入ParentComponent组件的实例，示例代码如下：

parentComponent.ts

通过下面的代码，在子组件中就可以通过Parent这个标识找到父组件的实例来，示例代码如下：

child.ts

三、兄弟组件间传值

兄弟组件之间传值可以利用创建公共服务的方式来实现。