使用Angular4怎么实现组件通讯?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
成都创新互联公司凭借专业的设计团队扎实的技术支持、优质高效的服务意识和丰厚的资源优势,提供专业的网站策划、成都网站建设、成都网站设计、网站优化、软件开发、网站改版等服务,在成都十年的网站建设设计经验,为成都上千家中小型企业策划设计了网站。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> <h3>Parent</h3> <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> <h3>Parent:{{i}}</h3> <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> <h2>parent: {{i}}</h2> <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> <h2>parent {{i}}</h2> <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> <h3>child {{i}}</h3> </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> <h2>parent {{i}}</h2> <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> <h3>child {{service.i}}</h3> </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> <h2>parent {{i}}</h2> <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> <h3>child {{i}}</h3> </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> <h2>parent</h2> <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> <h3>child {{i}}</h3> </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); } }
看完上述内容,你们掌握使用Angular4怎么实现组件通讯的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
网站标题:使用Angular4怎么实现组件通讯-创新互联
本文网址:https://www.cdcxhl.com/article22/dpcgjc.html
成都网站建设公司_创新互联,为您提供用户体验、ChatGPT、建站公司、企业建站、移动网站建设、品牌网站设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联