使用Angular4怎么实现组件通讯

　　介绍

使用Angular4怎么实现组件通讯?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<强> 1。父→子输入

家长。ts

import  {, Component },得到& # 39;@angular/核心# 39;; 　　 　　@ component ({ 　　,选择器:& # 39;page-parent& # 39; 　　,templateUrl: & # 39; parent.html& # 39; 　　}) 　　export  class  ParentPage  { 　　我:大敌;number =, 0; 　　,构造函数(){ 　　setInterval(才能(),=祝辞,{ 　　莞,,+ +; 　　,,},1000) 　　,} 　　}

家长。html

& lt; ion-header> 　　,& lt; ion-navbar> 　　& lt;才能ion-title> Parent</ion-title> 　　,& lt;/ion-navbar> 　　& lt;/ion-header> 　　 　　& lt; ion-content  padding> 　　,& lt; h3> Parent 　　,& lt; page-child [内容]=拔易４? lt;/page-child> 　　& lt;/ion-content>

孩子。ts

import {,组件,Input },得到& # 39;@angular/核心# 39;; 　　 　　@ component ({ 　　,选择器:& # 39;page-child& # 39; 　　,templateUrl: & # 39; child.html& # 39; 　　}) 　　export  class  ChildPage  { 　　@Input(),内容:字符串; 　　,构造函数(){ 　　,} 　　}

孩子。html

& lt; ion-content  padding> 　　孩子:{{内容}} 　　& lt;/ion-content>

结果:

使用Angular4怎么实现组件通讯

<强> 2。子→父输出

家长。ts

import  {, Component },得到& # 39;@angular/核心# 39;; 　　 　　@ component ({ 　　,选择器:& # 39;page-parent& # 39; 　　,templateUrl: & # 39; parent.html& # 39; 　　}) 　　export  class  ParentPage  { 　　我:大敌;number =, 0; 　　 　　,numberIChange(我:数字){ 　　,,this.i =,我; 　　,} 　　}

家长。html

& lt; ion-header> 　　,& lt; ion-navbar> 　　& lt;才能ion-title> Parent</ion-title> 　　,& lt;/ion-navbar> 　　& lt;/ion-header> 　　 　　& lt; ion-content  padding> 　　,& lt; h3>父:{{我}}& lt;/h3> 　　,& lt; page-child  (changeNumber)=皀umberIChange(事件)美元“祝辞& lt;/page-child> 　　& lt;/ion-content>

孩子。ts

import {组件的不同之处是,EventEmitter, Output },得到& # 39;@angular/核心# 39;; 　　 　　@ component ({ 　　,选择器:& # 39;page-child& # 39; 　　,templateUrl: & # 39; child.html& # 39; 　　}) 　　 　　export  class  ChildPage  { 　　,@Output (), changeNumber:, EventEmitter,=, new  EventEmitter (); 　　,数量:number =, 0; 　　,构造函数(){ 　　setInterval(才能(),=祝辞,{ 　　,,this.changeNumber.emit (+ + this.Number); 　　,,},1000) 　　,} 　　}

孩子。html

& lt; ion-content  padding> 　　,,孩子 　　& lt;/ion-content>

结果:

使用Angular4怎么实现组件通讯

<强> 3。子获得父实例

家长。ts

import  {, Component },得到& # 39;@angular/核心# 39;; 　　 　　@ component ({ 　　,选择器:& # 39;page-parent& # 39; 　　,templateUrl: & # 39; parent.html& # 39; 　　}) 　　export  class  ParentPage  {=,我:number  0; 　　}

家长。html

& lt; ion-header> 　　,& lt; ion-navbar> 　　& lt;才能ion-title> Parent</ion-title> 　　,& lt;/ion-navbar> 　　& lt;/ion-header> 　　 　　& lt; ion-content  padding> 　　,& lt; h2>父:{{我}}& lt;/h2> 　　,& lt; page-child> & lt;/page-child> 　　& lt;/ion-content>

孩子。ts

import {,组件,输入,,EventEmitter,,输出,主机,注入,forwardRef },得到& # 39;@angular/核心# 39;; 　　进口{ParentPage},得到& # 39;. ./父/母# 39;; 　　@ component ({ 　　,选择器:& # 39;page-child& # 39; 　　,templateUrl: & # 39; child.html& # 39; 　　}) 　　export  class  ChildPage  { 　　构造函数才能(,@Host (), @ inject (forwardRef((),=祝辞,ParentPage)),应用:,ParentPage), { 　　,,,setInterval((),=祝辞,{ 　　,,,,,app.i + +; 　　,,,},,1000); 　　,,} 　　}

孩子。html

& lt; ion-content  padding> 　　,child  　　& lt;/ion-content>

使用Angular4怎么实现组件通讯