Angular4 组件通讯方法大全
发布时间:2020-12-17 09:01:54 所属栏目:安全 来源:网络整理
导读:组件通讯,意在不同的指令和组件之间共享信息。如何在两个多个组件之间共享信息呢。 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有。。。。。我也找找了很多关于组件之间通讯的方法,不同的方法应用在不同的场景,根据功能需求选择组
组件通讯,意在不同的指令和组件之间共享信息。如何在两个多个组件之间共享信息呢。 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有。。。。。我也找找了很多关于组件之间通讯的方法,不同的方法应用在不同的场景,根据功能需求选择组件之间最适合的通讯方式。下面我就总结一下关于组件通讯的N多种方法。 1.父→子 inputparent.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 child.ts import { Component,Input } from '@angular/core'; @Component({ selector: 'page-child',templateUrl: 'child.html',}) export class ChildPage { @Input() content:string; constructor() { } } child.html 结果: 2.子→父 outputparent.ts import { Component } from '@angular/core'; @Component({ selector: 'page-parent',}) export class ParentPage { i: number = 0; parent.html
child.ts import { Component,EventEmitter,Output } from '@angular/core'; @Component({ selector: 'page-child',}) child.html 结果: 3.子获得父实例parent.ts import { Component } from '@angular/core'; @Component({ selector: 'page-parent',}) export class ParentPage { i:number = 0; } parent.html child.ts import { Component,Input,Output,Host,Inject,forwardRef } from '@angular/core'; import{ParentPage} from '../parent/parent'; @Component({ selector: 'page-child',}) export class ChildPage { constructor( @Host() @Inject(forwardRef(() => ParentPage)) app: ParentPage) { setInterval(() => { app.i++; },1000); } } child.html 结果: 4.父获得子实例parent.ts import {ViewChild,Component } from '@angular/core'; import{ChildPage}from '../child/child'; @Component({ selector: 'page-parent',}) export class ParentPage { @ViewChild(ChildPage) child:ChildPage; ngAfterViewInit() { setInterval(()=> { this.child.i++; },1000) } } parent.html child.ts import { Component,forwardRef } from '@angular/core'; child.html 结果: 5.serviceparent.ts import { Component } from '@angular/core'; import{myService}from '../child/myService' @Component({ selector: 'page-parent',}) export class ParentPage {
i:number=0;
constructor(service:myService) { setInterval(()=> { service.i++; },1000) } } parent.html child.ts import { Component} from '@angular/core'; import{myService}from "../child/myService" @Component({ selector: 'page-child',}) export class ChildPage { constructor(public service:myService){ } } child.html myService.ts
import{Injectable } from '@angular/core'; @Injectable() export class KmyService { i:number = 0; } 结果: 6.EventEmittermyService.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',}) export class ParentPage { i:number = 0; constructor(service:myService) { setInterval(()=> { service.change.emit(++this.i); },1000) } } parent.html child.ts import { Component,EventEmitter} from '@angular/core'; import{myService}from "../child/myService" @Component({ selector: 'page-child',}) export class ChildPage { i:number = 0; constructor(public service:myService){ service.change.subscribe((value:number)=>{ this.i = value; }) } } child.html 结果: 7.订阅parent.ts import { Component } from '@angular/core'; import{myService}from '../child/myService' @Component({ selector: 'page-parent',}) export class ParentPage { i:number=0; constructor(public service:myService) { setInterval(()=> { this.service.StatusMission(this.i++); },1000) } } parent.html child.ts import { Component,Injectable } from '@angular/core' import { myService } from "../child/myService" import { Subscription } from 'rxjs/Subscription'; @Component({ selector: 'page-child',}) 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 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); } } 结果: 以上七种组件与组件的通讯方式,可以选择应用于适合的场景里面,根据情况吧。 此随笔乃本人原创,如有疑问欢迎在下面评论,转载请标明出处。 如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |