【精】angular之组件交互全方位总结及示例探讨

说明

关于angular在国内使用的市场份额很少，所以百度出来的答案基本都是官网上的三板斧，很少有借鉴意义。所以这里我把大概收集到的知识点进行总结并扩展。
组件交互总共分为以下几点：（这里还是借鉴官网的说法）

1. 通过输入型绑定把数据从父组件传到子组件（父传子）

内容

在开始讲解之前，看下我的目录结构

1 父传子之输入型绑定
我们通过模版传参的形式，从父组件传递到子组件
首先，我们在根组件中，调用父组件

然后，我们在父组件中调用子组件

这样的话，我们就完成了父子组件的一个测试环境。
假设我们在父组件中，定义一个变量，要传到子组件中，那么怎么办呢？我们这样

首先定义一个变量，然后在模版中这样写

这里我们通过模版[sendChild]=“name” 属性绑定了我们前面定义的name变量，也就是**name:string = “xiaoming”**这个name，然后我们在传一个静态的变量，就是age=“13”;之后我们就需要考虑下，如何在子组件中获取这些变量的问题，很幸运。angular给我们提供了一个方法。可以这样去获取。

这里需要解释下
1 @Input 是官方提给我们用来获取传递的属性的办法。名称与传递的属性需要保持一致。其中@Input（‘age’） 括号里的这个age，其实就是我们在模版中写的那个age,这里的意思就是，通过input，我们获取了age的值，然后给了myAge这个变量。
2 大家不要在构造器中去获取值，因为初始化构造器时，值还没有传递过来，可以去钩子函数中获取

其实这里我们对比下vue的父传子哈，在vue中，我们是通过props去获取模版传过来的参数的，和用@Input获取，发现是不是本质相同。
那么有的小伙伴可能就会问了，那vue能传递方法，我们angular能不能传递方法呢？
这里我们实践一下

我们首先在父组件中定义一个方法，然后去子组件中获取



然后我们惊奇的发现，竟然是可以传递方法的。

2 父传子之本地变量方法
在父传子的办法种，官网还介绍了一种办法，就是通过本地变量的办法。我们看看如何实现

首先呢，我们在模版中，用#+变量的形式，定义一个本地变量。然后去获取子组件中的name属性

可以拿到属性，没什么问题；同理呢，拿方法自然也是没有问题的。
但是呢，这里就存在一个问题。我们发现这个#ref只能在模版中使用，我们想在组件中，也就是我们ts中使用，发现不行。类里面访问不到。这就是本地变量的优缺点了。
我们在回顾下vue中，是不是也对应这种方法呢？诶，还真有。在vue中，有一种方法叫做模版引用

<ChildComponent ref="componentA"></ChildComponent>

在模版中定义一个ref字段，它就代表了子组件这个实例。但是vue中比较好的是，父组件可以通过这个实例拿到子组件中所有的方法和属性，并且可以在类中使用

this.$refs.componentA.hello(); 这样使用

3父传子之@ViewChild()方法使用

这里呢，我们通过@ViewChild的方法，把子组件呢注入到父组件中，这样我们就能拿到子组件的属性和方法了。

但是呢，这里我们发现了一个问题，就是我们发现，只有在ngAfterViewInit()钩子函数中，我们才取到了这个值。这里官方的解释是这样的：被注入的组件只有在angular显示了父组件视图之后才能访问，所有我们只有在视图完后的钩子函数里才能拿到这个对象。
大家有没有发现，angular把vue中的ref其实拆分成了两个。

4子传父之事件监听方法

上面介绍了一箩筐的父传子，那么子传父是怎么实现的呢？
比如，我在子组件中定义了一个变量name，一个方法tt，那要怎么传给父组件呢？

官方给我们提供这样的一个装饰器@Output。这里定义的sendParent就是用来传给父组件的。而父组件则需要通过事件监听的方式来获取。

这里呢，就把子组件定义的sendParent绑定到父组件上的方法上，然后通过$event来获取值。子组件则通过

this.sendParent.emit()

来传递常量、属性、方法等。都可以传。传的时候，就会触发父组件的方法了

大家回顾下vue。发现是不是ebus非常的像。宛如"$emit"和"$on"的用法，只不过用起来更方便而已。

5父子组件交互之服务共享
这里呢，主要的思想，就是把一些公用的变量及方法，都放到服务中去
这里需要注意服务的作用域的问题。首先我们需要把服务注入到组件中去。

这样的话，我们在父子组件中实例化的服务就是单例服务，就能够共享变量及方法。
我们在服务里面定义一个变量及方法

然后我们在父子组件中，调用这个服务


发现没有问题

总结

总结一下，关于angular中组件交互的总共5种方法，类似于vue。
1 父传子
1）@input
2）本地变量
3）@viewchild
4）服务
2 子传父
1）@output
2）服务

当然还有几个额外的
1） rjxs中的subject
2) EventEmitter中通过emit发送，也可以通过subscribe进行订阅

这里需要额外注意一点：
就是我们在使用动态组件时<ng-template></ng-template>,是无法通过@input或者@output 在模版中绑定进行通讯的。因为动态组件，是无法确定子组件的。所以一般选用服务的方式。
当然如果和vue中一样，也可以用store进行管理；在vue中vuex；在angular中也有对应的ngrx（不太确定是这个了。。有点忘记了）。