Angular组件之间通讯
组件之间会有下列3种关系:
1. 父子关系
2. 兄弟关系
3. 没有直接关系
通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下:
1父子组件之间的交互(@Input/@Output/模板变量/@ViewChild)
2非父子组件(Service/localStorage)
3还可以利用Session等服务器端的解决方法
Angular组件间通讯方法:
1、父子组件之间的通讯
@Input:是属性绑定,父组件向子组件传递数据
@Output:是事件绑定,子组件向父组件传递数据的同时触发事件
1.1在父组件设置子组件上面的的属性
通过@input绑定子组件的属性,注意属性得是公开public的,私有private属性是无法传递的
es6新语法get/set.为属性提供了一个方便习惯的读/写方式, 拦截属性的存取行为。
在父组件设置该属性,就能够通过set方法来修改,从而实现在父组件设置子组件属性
子组件
import { Component, OnInit, Input } from '@angular/core'; @Component({
selector: 'app-child',
template: '<h1>{{childTitle}}</h1>'
})
export class ChildComponent implements OnInit { private _childTitle: string = '子组件标题'; @Input()
set childTitle(childTitle: string) {
this._childTitle = childTitle;
}
get childTitle(): string {
return this._childTitle;
} constructor() { } ngOnInit() { }
}
父组件
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-parent',
templateUrl: '<p>parent-and-child works!</p><app-child childTitle=“可设置子组件标题”></app-child>'
})
export class ParentAndChildComponent implements OnInit { constructor() { } ngOnInit() { } }
1.2父组件直接调用子组件的方法
通过模板内部定义子组件变量,在父组件上可以直接调用子组件的方法,如下:
子组件
import { Component, OnInit, Input } from '@angular/core'; @Component({
selector: 'app-child',
templateUrl: '<p>child work</p>'
})
export class ChildComponent implements OnInit {
constructor() { } ngOnInit() { } childPrint() {
alert("来自子组件的打印");
}
}
父组件
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-parent',
templateUrl: '<p>parent-and-child works!</p><app-child #child></app-child>
<button (click)="child.childPrint()"></button>'
})
export class ParentAndChildComponent implements OnInit { constructor() { } ngOnInit() { } }
1.3父组件接受子组件派发的事件
通过@Output在子组件绑定一个事件发射器,在父组件通过事件绑定监听该事件
这样在子组件派发一个事件,父组件就能够收到
子组件
import { Component, OnInit, Output, EventEmitter} from '@angular/core'; @Component({
selector: 'app-child',
templateUrl: '<p>child work</p>'
})
export class ChildComponent implements OnInit { @Output()
initEmit = new EventEmitter<string>(); constructor() { } ngOnInit() {
this.initEmit.emit("子组件初始化成功");
}
}
父组件
import { Component, OnInit, Output, EventEmitter } from '@angular/core'; @Component({
selector: 'app-parent',
templateUrl: '<p>parent-and-child works!</p><app-child (initEmit)="accept($event)"></app-child>'
})
export class ParentAndChildComponent implements OnInit { constructor() { } ngOnInit() { }
accept(msg:string) {
alert(msg);
}
}
2、没有直接关系的组件
2.1service
做一个全局单例的service,然后多个组件共享这个实例,当然就可以共享其中的成员,来进行通讯。
只需将service注入到组件中就可在组件中使用该service中提供的变量和方法。
2.2路由传值
对于2个不同路由的组件,我们也可以通过路由传递信息
假设2个路由分别为~/home,~/about
2.2.1传递一个值
url: /about/:id
<button [routerLink]="['/about',1]">跳转</button>
获取传入的值:
this.id = this.route.snapshot.params['id'];
2.2.2传递一个对象
类似于上述的传递一个值,但是不需要再路由末尾加上/:id
url: /about
<button [routerLink]="['/about']" [queryParams]="{id:12,status:true}">跳转</button>
this.route.queryParams.subscribe((params: Params)=>{
this.id = params['id'];
this.status = params['status'];
})
3通用方式实现通讯
3.1localstorage处理
在angular中也可以使用本地存储这种比较通用的方式在组件间通讯,但本地存储有下列弊端:
1存储空间有限
2只能存储字符串
setData(){
window.localStorage.setItem("test", JSON.stringify({ key: 'test', value: }));
} getData() {
var json = window.localStorage.getItem("test");
var obj = JSON.parse(json);
console.log(obj.key);
console.log(obj.value);
}
3.2服务端处理
也可以在服务端来处理组件间的通讯问题,通过接口调用存储或获取数据
转自:https://www.cnblogs.com/banluduxing/p/9290569.html
Angular组件之间通讯的更多相关文章
- angular组件之间的通讯
组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...
- Angular 发布订阅模式实现不同组件之间通讯
在我们项目中要实现不同组件之间通讯,Angular的@Input和@Output只能实现有父子组件的限制,如果是复杂跨组件实现不同组件可以通过共享变量的方式实现,比如这个博客的思路:https://w ...
- Android--Otto事件总线 -- 组件之间通讯框架使用 --模式解析
前言:Otto事件总线 -- 组件之间通讯框架 对于之前的情况activity之间或者fragment之间等跳转传值一般都是用bundle.intent等,从activityA --- activit ...
- vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子,儿子更改数据后,重新发送给父亲,父亲数据更改后,属性会重新发送个儿子,儿子刷新新数据
vue组件是相互独立的,如果要交互通讯,这时候,就需要组件之间数据互通了 往常我们讲的都是数据传递,子传父,父传子,都没有说子和父,父与子之间的数据互通 父亲传递给儿子数据,儿子触发一个父亲方法,将最 ...
- angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2
工作中用到ng2的组件通讯 奈何官方文档言简意赅 没说明白 自己搞明白后 整理后分享下 rxjs 不懂的看这篇文章 讲很详细 http://www.open-open.com/lib/view/ope ...
- angular组件之间的通信
一.组件创建 直接使用 ng g component 的命令创建组件,会自动生成组件所需的文件,方便快捷. // 父组件 ng g component parent // 子组件 ng g compo ...
- angular 组件之间传值
/** * Created by Administrator on 2017/8/28. */ var app =angular.module('app',[]); app.directive('fo ...
- Angular 组件之间的传值
第一种方法(传单个或者多个参数): 主页面方法: 先添加引用:private _routes: Router, Details(PBSCode) { this._routes.navigate(['p ...
- vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
随机推荐
- vue中添加Echarts图表的使用,Echarts的学习笔记
项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...
- nginx 配置 单页面应用的解决方案
server { listen 80; server_name example.com; root /var/www/example.com; gzip_static on; location / ...
- Delphi下OpenGL2d绘图(03)-画线
一.前言 画线与画点基本上代码是相同.区别在于glBegin()的参数.绘制的框架代码可以使用 Delphi下OpenGL2d绘图(01)-初始化 中的代码.修改的部份为 Draw 函数的内容. 二. ...
- 第8章 scrapy进阶开发(1)
8-1 selenium动态网页请求与模拟登录知乎 Ⅰ.介绍selenium 1.什么是selenium:selenium百度百科 2.selenium的构架图: 如果要操作浏览器,还需要一个driv ...
- T4模板的一些配置(从EF数据更新)
<#@ template debug="false" hostspecific="false" language="C#" #> ...
- MVC中学到的小知识(MVC中的跳转,传参)
1.mvc中视图中的href="XXX",这个XXX是控制器地址,不是另一个视图.(这里的href语句只能转向控制器,不能直接转向视图),如果要实现转向视图,可以先转到控制器,然后 ...
- jQuery 表格中实现“删除线”的增进方法
之前做了一个删除线的效果,就是类似这样的,在内容的中间加一条线. 但是又有点不同的是,这种删除线不是单纯的在文字之上,而是给一个Table中的一行加上这种删除线效果. 这里有两个方法,是在不同时期写的 ...
- 九、curator recipes之不可重入锁InterProcessSemaphoreMutex
简介 recipes的InterProcessSemaphoreMutex是一种不可重入的互斥锁,也就意味着即使是同一个线程也无法在持有锁的情况下再次获得锁,所以需要注意,不可重入的锁很容易在一些情况 ...
- C/C++:Windows cmd 指令
一.快捷键1. Windows键 自从104键盘首次加入Windows键后,微软便一直计划为这个键添加更多功能,当然Win8也不例外. * Win+C:调出应用Charm菜单(Metro.传统桌面) ...
- Eclipse3.2查找jre的问题
前几天遇到一个问题,最开始电脑上使用的是解压的JDK(带jre),但是不能打开jar文件.所以从网上下载了一个jre1.8,然后问题来了,Eclipse打开就报错,弹出一个框,在eclipse的目录下 ...