[转载]Angular4 组件通讯方法大全

组件通讯,意在不同的指令和组件之间共享信息。如何在两个多个组件之间共享信息呢。

最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有。。。。。我也找找了很多关于组件之间通讯的方法,不同的方法应用在不同的场景,根据功能需求选择组件之间最适合的通讯方式。下面我就总结一下关于组件通讯的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);
    }
}
复制代码

结果:

 

以上七种组件与组件的通讯方式,可以选择应用于适合的场景里面,根据情况吧。

posted @ 2018-06-27 17:19  创业男生  阅读(181)  评论(0编辑  收藏  举报