[转载]Angular4 组件通讯方法大全
组件通讯,意在不同的指令和组件之间共享信息。如何在两个多个组件之间共享信息呢。
最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有。。。。。我也找找了很多关于组件之间通讯的方法,不同的方法应用在不同的场景,根据功能需求选择组件之间最适合的通讯方式。下面我就总结一下关于组件通讯的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>
结果:
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>
结果:
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>
结果:
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>
结果:
5.service
parent.ts
import { Component } from '@angular/core';
import{myService}from '../child/myService' @Component({
selector: 'page-parent',
templateUrl: 'parent.html',
})
export class ParentPage {
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;
}
结果:
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>
结果:
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);
}
}
结果:
以上七种组件与组件的通讯方式,可以选择应用于适合的场景里面,根据情况吧。
[转载]Angular4 组件通讯方法大全的更多相关文章
- Angular4 组件通讯方法大全
组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...
- vue组件通讯方法汇总(在不使用vuex的情况下)
前三种是父子组件通讯,最后一种是平级组件.
- angular4 组件通讯、生命周期
主要通讯形式 父组件通过属性绑定到子组件,子组件通过事件传递参数到父组件 父组件通过局部变量获取子组件的引用 父组件使用@ViewChild获取子组件的引用 两个不相关联的组件使用中间人模式交互 终极 ...
- Omi教程-组件通讯攻略大全
组件通讯 Omi框架组建间的通讯非常遍历灵活,因为有许多可选方案进行通讯: 通过在组件上声明 data-* 传递给子节点 通过在组件上声明 data 传递给子节点 (支持复杂数据类型的映射) 父容器设 ...
- VC中调用COM组件的方法(转载)
原文参考:http://hi.baidu.com/mingyueye/item/53ebecd44da76917d80e4449 总结一下在VC中调用COM组件的方法 准备及条件: COM服务器为进程 ...
- 转载收藏(js数组方法大全)
js数组方法大全 JavaScript中创建数组有两种方式 (一)使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组var arr2 = new Arra ...
- Angular6 学习笔记——组件详解之组件通讯
angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...
- Android零基础入门第22节:ImageView的属性和方法大全
原文:Android零基础入门第22节:ImageView的属性和方法大全 通过前面几期的学习,TextView控件及其子控件基本学习完成,可以在Android屏幕上显示一些文字或者按钮,那么从本期开 ...
- Android零基础入门第17节:Android开发第一个控件,TextView属性和方法大全
原文:Android零基础入门第17节:Android开发第一个控件,TextView属性和方法大全 前面简单学习了一些Android UI的一些基础知识,那么接下来我们一起来详细学习Android的 ...
随机推荐
- 百分之 95% 的程序员不知道 Trending 是什么。
前言如果学习到的知识不成体系,那么遇到问题时就会非常难解决.常有人问你从哪里了解新技术怎么判断其发展趋势的,除了关注 Hacker News 以及庞大的 Awesome 还有没有其它方式?有啊当然是每 ...
- oauth入门
oauth可以支持跨网站的数据传输.假设一个用户把照片上传到faji网站,然后想登录到beppa网站(照片打印),把faji的上照片打印出来. 她当然可以自己把照片取下来再上传上去,不过比较麻烦. 使 ...
- Regex Golf练习笔记(1)
正则表达式进阶练习:https://alf.nu/RegexGolf (此练习笔记) 正则表达式验证:https://regexr.com/ (1) (2) 注释:每个词的三个字母在后面重复出现了一 ...
- 利用backtrace和backtrace_symbols函数打印调用栈信息
在头文件"execinfo.h"中声明了三个函数用于获取当前线程的函数调用堆栈. #include <execinfo.h> int backtrace(void * ...
- [调试]VS2013调试时提示“运行时当前拒绝计算表达式的值”
VS2013 下单元测试调试时遇到的问题,以前倒从未遇到过. 中文关键字在百度和谷歌中搜索均无果. Google 下搜索 “The runtime has refused to evaluate th ...
- Restframework 分页器 Pagnation 组件实例-5
分页逻辑 from rest_framework.pagination import PageNumberPagination class BookView(APIView): # authentic ...
- Statement与PreparedStatement区别
1.性能区别 Statement statement = conn.createStatement(); PreparedStatement preStatement = conn.prepareSt ...
- Weekly Contest 131
1021. Remove Outermost Parentheses A valid parentheses string is either empty (""), " ...
- 790. Domino and Tromino Tiling
We have two types of tiles: a 2x1 domino shape, and an "L" tromino shape. These shapes may ...
- Lunix git stash clear 或者 git stash drop后恢复的方法
首先输入 git fsck --lost-found 会看到 一条一条的记录 这里的"dangling commit ..."你可以理解为记录的是你stash的id(经测试,该id ...