Angular组件通信

　　头条创作挑战赛
　　本文同步本人掘金平台的文章：https：juejin。cnpost7084011213146816542
　　上一篇，我们讲了Angular结合NGZORRO快速开发。前端开发，很大程度上是组件化开发，永远离不开组件之间的通信。那么，在Angular开发中，其组件之间的通信是怎么样的呢？
　　举一反三，Vue和React中大同小异
　　本文纯文字，比较枯燥。因为控制台打印的东西比较鸡肋，所以就不配图了，嗯～希望读者跟着说明代码走一遍更容易吸收～1。父组件通过属性传递值给子组件
　　相当于你自定义了一个属性，通过组件的引入，将值传递给子组件。ShowyoutheCODE。！parent。component。htmlappchild复制代码
　　在父组件中调用子组件，这里命名一个parentProp的属性。child。component。tsimport｛Component，OnInit，Input｝fromangularcore；Component（｛selector：appchild，templateUrl：。child。component。html，styleUrls：〔。child。component。scss〕｝）exportclassChildComponentimplementsOnInit｛输入装饰器Input（）parentProp！：string；constructor（）｛｝ngOnInit（）：void｛｝｝复制代码
　　子组件接受父组件传入的变量parentProp，回填到页面。！child。component。htmlh1Hello！｛｛parentProp｝｝h1复制代码2。子组件通过Emitter事件传递信息给父组件
　　通过newEventEmitter（）将子组件的数据传递给父组件。child。component。tsimport｛Component，OnInit，Output，EventEmitter｝fromangularcore；Component（｛selector：appchild，templateUrl：。child。component。html，styleUrls：〔。child。component。scss〕｝）exportclassChildComponentimplementsOnInit｛输出装饰器Output（）privatechildSayHinewEventEmitter（）constructor（）｛｝ngOnInit（）：void｛this。childSayHi。emit（Myparents）；｝｝复制代码
　　通过emit通知父组件，父组件对事件进行监听。parent。component。tsimport｛Component，OnInit｝fromangularcore；Component（｛selector：appcommunicate，templateUrl：。communicate。component。html，styleUrls：〔。communicate。component。scss〕｝）exportclassCommunicateComponentimplementsOnInit｛publicmsg：stringconstructor（）｛｝ngOnInit（）：void｛｝fromChild（data：string）｛这里使用异步setTimeout（（）｛this。msgdata｝，50）｝｝复制代码
　　在父组件中，我们对child组件来的数据进行监听后，这里采用了setTimeout的异步操作。是因为我们在子组件中初始化后就进行了emit，这里的异步操作是防止RaceCondition竞争出错。
　　我们还得在组件中添加fromChild这个方法，如下：！parent。component。htmlh1Hello！｛｛msg｝｝h1appchild复制代码3。通过引用，父组件获取子组件的属性和方法
　　我们通过操纵引用的方式，获取子组件对象，然后对其属性和方法进行访问。
　　我们先设置子组件的演示内容：child。component。tsimport｛Component，OnInit｝fromangularcore；Component（｛selector：appchild，templateUrl：。child。component。html，styleUrls：〔。child。component。scss〕｝）exportclassChildComponentimplementsOnInit｛子组件的属性publicchildMsg：stringProp：messagefromchildconstructor（）｛｝ngOnInit（）：void｛｝子组件方法publicchildSayHi（）：void｛console。log（Method：Iamyourchild。）｝｝复制代码
　　我们在父组件上设置子组件的引用标识childComponent：！parent。component。htmlappchild复制代码
　　之后在javascript文件上调用：import｛Component，OnInit，ViewChild｝fromangularcore；import｛ChildComponent｝from。componentschildchild。component；Component（｛selector：appcommunicate，templateUrl：。communicate。component。html，styleUrls：〔。communicate。component。scss〕｝）exportclassCommunicateComponentimplementsOnInit｛ViewChild（childComponent）childComponent！：ChildComponent；constructor（）｛｝ngOnInit（）：void｛this。getChildPropAndMethod（）｝getChildPropAndMethod（）：void｛setTimeout（（）｛console。log（this。childComponent。childMsg）；Prop：messagefromchildthis。childComponent。childSayHi（）；Method：Iamyourchild。｝，50）｝｝复制代码
　　这种方法有个限制，就是子属性的修饰符需要是public，当是protected或者private的时候，会报错。你可以将子组件的修饰符更改下尝试。报错的原因如下：
　　类型
　　使用范围
　　public
　　允许在累的内外被调用，作用范围最广
　　protected
　　允许在类内以及继承的子类中使用，作用范围适中
　　private
　　允许在类内部中使用，作用范围最窄4。通过service去变动
　　我们结合rxjs来演示。
　　rxjs是使用Observables的响应式编程的库，它使编写异步或基于回调的代码更容易。
　　后期会有一篇文章记录rxjs，敬请期待
　　我们先来创建一个名为parentandchild的服务。parentandchild。service。tsimport｛Injectable｝fromangularcore；import｛BehaviorSubject，Observable｝fromrxjs；BehaviorSubject有实时的作用，获取最新值Injectable（｛providedIn：root｝）exportclassParentAndChildService｛privatesubject：BehaviorSubjectnewBehaviorSubject（null）constructor（）｛｝将其变成可观察getMessage（）：Observable｛returnthis。subject。asObservable（）｝setMessage（msg：string）｛this。subject。next（msg）；｝｝复制代码
　　接着，我们在父子组件中引用，它们的信息是共享的。parent。component。tsimport｛Component，OnDestroy，OnInit｝fromangularcore；引入服务import｛ParentAndChildService｝fromsrcappservicesparentandchild。service；import｛Subject｝fromrxjsimport｛takeUntil｝fromrxjsoperatorsComponent（｛selector：appcommunicate，templateUrl：。communicate。component。html，styleUrls：〔。communicate。component。scss〕｝）exportclassCommunicateComponentimplementsOnInit，OnDestroy｛unsubscribe：SubjectbooleannewSubject（）；constructor（privatereadonlyparentAndChildService：ParentAndChildService）｛｝ngOnInit（）：void｛this。parentAndChildService。getMessage（）。pipe（takeUntil（this。unsubscribe））。subscribe（｛next：（msg：any）｛console。log（Parent：msg）；刚进来打印Parent：null一秒后打印Parent：Jimmy｝｝）；setTimeout（（）｛this。parentAndChildService。setMessage（Jimmy）；｝，1000）｝ngOnDestroy（）｛取消订阅this。unsubscribe。next（true）；this。unsubscribe。complete（）；｝｝复制代码import｛Component，OnInit｝fromangularcore；import｛ParentAndChildService｝fromsrcappservicesparentandchild。service；Component（｛selector：appchild，templateUrl：。child。component。html，styleUrls：〔。child。component。scss〕｝）exportclassChildComponentimplementsOnInit｛constructor（privateparentAndChildService：ParentAndChildService）｛｝为了更好理解，这里我移除了父组件的SubjectngOnInit（）：void｛this。parentAndChildService。getMessage（）。subscribe（｛next：（msg：any）｛console。log（Child：msg）；刚进来打印Child：null一秒后打印Child：Jimmy｝｝）｝｝复制代码
　　在父组件中，我们一秒钟之后更改值。所以在父子组件中，一进来就会打印msg的初始值null，然后过了一秒钟之后，就会打印更改的值Jimmy。同理，如果你在子组件中对服务的信息，在子组件打印相关的值的同时，在父组件也会打印。
　　【完】