組件通訊，意在不同的指令和組件之間共享信息。如何在兩個多個組件之間共享信息呢。

最近在項目上，組件跟組件之間可能是父子關系，兄弟關系，爺孫關系都有。。。。。我也找找了很多關于組件之間通訊的方法，不同的方法應用在不同的場景，根據功能需求選擇組件之間最適合的通訊方式。下面我就總結一下關于組件通訊的N多種方法。

1.父→子 input

parent.ts

import { Component } from '@angular/core';@Component({selector: 'page-parent',templateUrl: 'parent.html', }) export class ParentPage {i: number = 0;constructor() {setInterval(() => {this.i++;}, 1000)} } parent.html
<ion-header><ion-navbar><ion-title>Parent</ion-title></ion-navbar> </ion-header><ion-content padding><h2>Parent</h2><page-child [content]="i"></page-child> </ion-content>

child.ts

import { Component,Input } from '@angular/core';@Component({selector: 'page-child',templateUrl: 'child.html', }) export class ChildPage { @Input() content:string;constructor() {} } child.html

<ion-content padding> child:{{content}} </ion-content>

結果:

?

2.子→父 output

parent.ts

import { Component } from '@angular/core';@Component({selector: 'page-parent',templateUrl: 'parent.html', }) export class ParentPage {i: number = 0;
numberIChange(i:number){this.i = i;} } parent.html
<ion-header><ion-navbar><ion-title>Parent</ion-title></ion-navbar> </ion-header><ion-content padding><h2>Parent:{{i}}</h2><page-child (changeNumber)="numberIChange($event)"></page-child> </ion-content>

child.ts

import { Component, EventEmitter, Output } from '@angular/core';@Component({selector: 'page-child',templateUrl: 'child.html', })
export class ChildPage {@Output() changeNumber: EventEmitter<number> = new EventEmitter();Number: number = 0;constructor() {setInterval(() => {this.changeNumber.emit(++this.Number);}, 1000)} } child.html

<ion-content padding>child </ion-content>

結果：

3.子獲得父實例

?parent.ts

import { Component } from '@angular/core';@Component({selector: 'page-parent',templateUrl: 'parent.html', }) export class ParentPage {i:number = 0; } parent.html

<ion-header><ion-navbar><ion-title>Parent</ion-title></ion-navbar> </ion-header><ion-content padding><h1>parent: {{i}}</h1><page-child></page-child> </ion-content>

child.ts

import { Component, Input, EventEmitter, Output,Host,Inject,forwardRef } from '@angular/core'; import{ParentPage} from '../parent/parent'; @Component({selector: 'page-child',templateUrl: 'child.html', }) export class ChildPage {constructor( @Host() @Inject(forwardRef(() => ParentPage)) app: ParentPage) {setInterval(() => {app.i++;}, 1000);} } child.html

<ion-content padding>child </ion-content>

結果：

4.父獲得子實例

parent.ts

import {ViewChild, Component } from '@angular/core'; import{ChildPage}from '../child/child';@Component({selector: 'page-parent',templateUrl: 'parent.html', }) export class ParentPage { @ViewChild(ChildPage) child:ChildPage;ngAfterViewInit() {setInterval(()=> {this.child.i++;}, 1000)} } parent.html

<ion-header><ion-navbar><ion-title>Parent</ion-title></ion-navbar> </ion-header><ion-content padding><h1>parent {{i}}</h1><page-child></page-child> </ion-content>

child.ts

import { Component, Input, EventEmitter, Output,Host,Inject,forwardRef } from '@angular/core';

@Component({selector: 'page-child',templateUrl: 'child.html', }) export class ChildPage { i:number = 0; } child.html

<ion-content padding> <h2>child {{i}}</h2> </ion-content>

結果：

5.service?

parent.ts

import { Component } from '@angular/core'; import{myService}from '../child/myService'@Component({selector: 'page-parent',templateUrl: 'parent.html', }) export class ParentPage { i:number=0; constructor(service:myService) {setInterval(()=> {service.i++;}, 1000)} } parent.html

<ion-header><ion-navbar><ion-title>Parent</ion-title></ion-navbar> </ion-header><ion-content padding><h1>parent {{i}}</h1><page-child></page-child> </ion-content>

child.ts

import { Component} from '@angular/core'; import{myService}from "../child/myService" @Component({selector: 'page-child',templateUrl: 'child.html', }) export class ChildPage { constructor(public service:myService){} } child.html

<ion-content padding> <h2>child {{service.i}}</h2> </ion-content> myService.ts
ps:記得在app.module.ts 加上providers: [KmyService] import{Injectable } from '@angular/core'; @Injectable() export class KmyService {i:number = 0; }

結果：

6.EventEmitter

myService.ts

import {Component,Injectable,EventEmitter} from '@angular/core'; @Injectable() export class myService {change: EventEmitter<number>;constructor(){this.change = new EventEmitter();} }

parent.ts

import { Component } from '@angular/core'; import{myService}from '../child/myService'@Component({selector: 'page-parent',templateUrl: 'parent.html', }) export class ParentPage {i:number = 0;constructor(service:myService) {setInterval(()=> {service.change.emit(++this.i);}, 1000)} } parent.html

<ion-header><ion-navbar><ion-title>Parent</ion-title></ion-navbar> </ion-header><ion-content padding><h1>parent {{i}}</h1><page-child></page-child> </ion-content>

child.ts

import { Component, EventEmitter} from '@angular/core';import{myService}from "../child/myService" @Component({selector: 'page-child',templateUrl: 'child.html', }) export class ChildPage {i:number = 0;constructor(public service:myService){service.change.subscribe((value:number)=>{this.i = value;})}} child.html

<ion-content padding><h2>child {{i}}</h2> </ion-content>

?

結果：

7.訂閱

parent.ts

import { Component } from '@angular/core'; import{myService}from '../child/myService'@Component({selector: 'page-parent',templateUrl: 'parent.html', }) export class ParentPage {i:number=0;constructor(public service:myService) {setInterval(()=> {this.service.StatusMission(this.i++);}, 1000)} } parent.html

<ion-header><ion-navbar><ion-title>Parent</ion-title></ion-navbar> </ion-header><ion-content padding><h1>parent</h1><page-child></page-child> </ion-content>

child.ts

import { Component, Injectable } from '@angular/core' import { myService } from "../child/myService" import { Subscription } from 'rxjs/Subscription'; @Component({selector: 'page-child',templateUrl: 'child.html', }) export class ChildPage {i:number=0;subscription: Subscription;constructor(private Service: myService) {this.subscription = Service.Status$.subscribe(message => {this.i=message;});}ngOnDestroy() {this.subscription.unsubscribe();} } child.html

<ion-content padding><h2>child {{i}}</h2> </ion-content>

myService.ts

import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject';@Injectable() export class myService {private Source=new Subject<any>();Status$=this.Source.asObservable();StatusMission(message: any) {this.Source.next(message);} }

結果：

?

以上七種組件與組件的通訊方式，可以選擇應用于適合的場景里面，根據情況吧。

?

此隨筆乃本人原創，如有疑問歡迎在下面評論，轉載請標明出處。

如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。

轉載于:https://www.cnblogs.com/huangenai/p/7246651.html

總結

以上是生活随笔為你收集整理的Angular4 组件通讯方法大全的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。