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: 1 }));
}

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

原文地址:https://www.cnblogs.com/xuepei/p/9367427.html

时间: 2024-10-03 22:53:53

Angular组件之间通讯的相关文章

angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2

工作中用到ng2的组件通讯 奈何官方文档言简意赅 没说明白 自己搞明白后 整理后分享下 rxjs 不懂的看这篇文章 讲很详细 http://www.open-open.com/lib/view/open1462525661610.html 以下是服务代码 1 import { Injectable } from '@angular/core'; 2 import {Subject}from"rxjs/Subject"; 3 @Injectable() 4 export class CS

vue.js组件之间通讯--父组件调用子组件的一些方法,子组件暴露一些方法,让父组件调用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/

bus.js非父子组件之间通讯

1.bus.js文件: assets目录下 import Vue from 'vue' // 创建通讯实例 var bus = new Vue() export default bus 2.在需要通讯的页面引入: import Bus from '@/assets/common/bus' 3.在数据发起方发送: Bus.$emit('getCode',this.openDialog1.groupid) 4.数据接收方获取:mounted里 Bus.$on('getCode', function

Angular开发实践(四):组件之间的交互

在Angular应用开发中,组件可以说是随处可见的.本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法. 根据数据的传递方向,分为父组件向子组件传递.子组件向父组件传递及通过服务传递三种交互方法. 父组件向子组件传递 子组件通过@Input装饰器定义输入属性,然后父组件在引用子组件的时候通过这些输入属性向子组件传递数据,子组件可通过setter或ngOnChanges()来截听输入属性值的变化. 先定义两个组件,分别为子组件DemoChildComponent和父组件De

组件之间的通讯:兄弟组件之间的相互通讯(中央事件总线)

组件之间的通讯: 父->子:通过props,data属性, 子->父:通过派发事件 兄弟组件:中央事件总线(......data{ Bus:new Vue()}.....) 更为复杂的通讯:就是用vuex 关于兄弟组件之间的通讯官档上推荐使用中央事件总线,我们也确实是这样做的, 中央事件总线,其实就是在父组件data中在实例化话一个vue实例,用于管理组件之间的通讯 假设我们有一个组件A,和B,他们之间的要进行数据通讯,那么他们之间肯定要建立某种联系,这个联系人就是父组件,联系地址就是中央事件

angular模块和组件之间传递信息和操作流程的方法(笔记)

angular的模块之间,以及controller.directive等组件之间,是相对独立的,用以实现解耦合. 为实现相互之间传递信息及操作流程,有以下一些机制: 1.事件机制: $scope.$broadcast:向下广播事件,下方所有的scope都会接收到这个事件,事件不能中途终止. $scope.$emit:向上冒泡事件,可带参数,一直冒泡到$rootScope,中途可以用stopPropagation()方法终止冒泡. 2.scope的继承机制: 子scope的__proto__对象就

angular——组件交互

angular是以组件化的形式来实现,因而组件交互是极为基础且重要的,下面对其组件之间的交互方式一一介绍. 1. 通过输入型绑定把数据从父组件传到子组件. child.component.ts: <p>{{message}}</p> parent.component.ts: <app-child [message]="callChild"></app-child> 2. 通过serter接听输入属性值的变化 parent.componen

vue.js 组件之间传递数据

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文就这个知识点和大家一起来扒一扒,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册一个子组件 Vue.component(

vue.js 组件之间如何实现数据传递?

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文和大家分享的就是vue.js  组件之间传递数据相关内容,一起来看看吧,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册