Angular4 組件通訊方法大全(推薦)

2019-11-19 13:30:10

字體：大中小

來源：轉載

供稿：網友

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

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

結果：