Angular4 組件通訊方法大全(推薦)
更新時間：2018年07月12日 15:17:09 作者：huangenai
這篇文章主要介紹了Angular4 組件通訊方法大全(推薦)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
組件通訊，意在不同的指令和組件之間共享信息。如何在兩個多個組件之間共享信息呢。
最近在項目上，組件跟組件之間可能是父子關(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.子獲得父實例
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.父獲得子實例
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)文章
AngularJS基礎(chǔ) ng-mousemove 指令簡單示例
本文主要介紹AngularJS ng-mousemove 指令,這里幫大家整理了ng-mousemove 指令的詳細(xì)資料,并附有示例代碼,有需要的朋友參考下2016-08-08
Angularjs自定義指令實現(xiàn)分頁插件(DEMO)
由于最近的一個項目使用的是angularjs1.0的版本，涉及到分頁查詢數(shù)據(jù)的功能，后來自己就用自定義指令實現(xiàn)了該功能，下面小編把實例demo分享到腳本之家平臺，需要的朋友參考下2017-09-09
本篇文章主要介紹了Angular如何引入第三方庫的方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Angular腳手架開發(fā)的實現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
基于angular2 的 http服務(wù)封裝的實例代碼
這篇文章主要介紹了基于angular2 的 http服務(wù)封裝實例代碼，2017-06-06
使用AngularJs進(jìn)行開發(fā)，在項目中，經(jīng)常會遇到上傳圖片后，需在一旁預(yù)覽圖片內(nèi)容，怎么實現(xiàn)這樣的功能呢？今天小編給大家分享AugularJs上傳前預(yù)覽圖片的實現(xiàn)代碼，需要的朋友參考下吧2017-01-01
Webpack 實現(xiàn) AngularJS 的延遲加載
這篇文章主要介紹了Webpack 實現(xiàn) AngularJS 的延遲加載的相關(guān)資料,需要的朋友可以參考下2016-03-03
AngularJs的UI組件ui-Bootstrap之Tooltip和Popover
這篇文章主要介紹了AngularJs的UI組件ui-Bootstrap之Tooltip和Popover，tooltip和popover是輕量的、可擴(kuò)展的、用于提示的指令。具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了angular2模塊和共享模塊詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
詳解AngularJs中$sce與$sceDelegate上下文轉(zhuǎn)義服務(wù)
這篇文章給大家詳細(xì)介紹了AngularJs提供的嚴(yán)格上下文轉(zhuǎn)義服務(wù)$sce與$sceDelegate，文中介紹的很詳細(xì)，有需要的朋友們可以參考借鑒。2016-09-09