使用Angular4怎么实现组件通讯？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
创新互联专注于企业成都全网营销推广、网站重做改版、沾益网站定制设计、自适应品牌网站建设、H5技术、商城开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为沾益等各大城市提供网站开发制作服务。
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
Parent
Parent
child.ts
import { Component,Input } from '@angular/core';
@Component({
selector: 'page-child',
templateUrl: 'child.html',
})
export class ChildPage {
@Input() content:string;
constructor() {
}
}child.html
child:{{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
Parent
Parent:{{i}}
child.ts
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'page-child',
templateUrl: 'child.html',
})
export class ChildPage {
@Output() changeNumber: EventEmitter = new EventEmitter();
Number: number = 0;
constructor() {
setInterval(() => {
this.changeNumber.emit(++this.Number);
}, 1000)
}
}child.html
child
结果：
3.子获得父实例
parent.ts
import { Component } from '@angular/core';
@Component({
selector: 'page-parent',
templateUrl: 'parent.html',
})
export class ParentPage {
i:number = 0;
}parent.html
Parent
parent: {{i}}
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
child
结果：
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
Parent
parent {{i}}
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
child {{i}}
结果：
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
Parent
parent {{i}}
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
child {{service.i}}
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;
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
Parent
parent {{i}}
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
child {{i}}
结果：
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
Parent
parent
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
child {{i}}
myService.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class myService {
private Source=new Subject();
Status$=this.Source.asObservable();
StatusMission(message: any) {
this.Source.next(message);
}
}看完上述内容，你们掌握使用Angular4怎么实现组件通讯的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
分享文章：使用Angular4怎么实现组件通讯
标题网址：
http://chengdu.cdxwcx.cn/article/gjdogp.html
