Angular4 組件通訊方法大全(推薦)
組件通訊,意在不同的指令和組件之間共享信息。如何在兩個多個組件之間共享信息呢。
最近在項(xiàng)目上,組件跟組件之間可能是父子關(guān)系,兄弟關(guān)系,爺孫關(guān)系都有。。。。。我也找找了很多關(guān)于組件之間通訊的方法,不同的方法應(yīng)用在不同的場景,根據(jù)功能需求選擇組件之間最適合的通訊方式。下面我就總結(jié)一下關(guān)于組件通訊的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>
結(jié)果:
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>
結(jié)果:
3.子獲得父實(shí)例
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>
結(jié)果:
4.父獲得子實(shí)例
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>
結(jié)果:
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; }
結(jié)果:
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>
結(jié)果:
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); } }
結(jié)果:
以上七種組件與組件的通訊方式,可以選擇應(yīng)用于適合的場景里面,根據(jù)情況吧。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解angular中通過$location獲取路徑(參數(shù))的寫法
本篇文章主要介紹了詳解angular中通過$location獲取路徑(參數(shù))的寫法 ,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-03-03angularjs select 賦值 ng-options配置方法
下面小編就為大家分享一篇angularjs select 賦值 ng-options配置方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法
下面小編就為大家分享一篇angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程
本篇文章主要介紹了詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程 ,具有一定的參考價值,有興趣的可以了解一下2017-08-08Angular 開發(fā)學(xué)習(xí)之Angular CLI的安裝使用
這篇文章主要介紹了Angular 開發(fā)學(xué)習(xí)之Angular CLI的安裝使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12angular json對象push到數(shù)組中的方法
下面小編就為大家分享一篇angular json對象push到數(shù)組中的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02AngularJS框架的ng-app指令與自動加載實(shí)現(xiàn)方法分析
這篇文章主要介紹了AngularJS框架的ng-app指令與自動加載實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了ng-app指令的功能及自動加載機(jī)制的實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01