angular中不同的组件间传值与通信的方法


Posted in Javascript onNovember 04, 2017

本文主要介绍angular在不同的组件中如何进行传值,如何通讯。主要分为父子组件和非父子组件部分。

父子组件间参数与通讯方法

使用事件通信(EventEmitter,@Output):

场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件;

步骤:

  1. 子组件创建事件EventEmitter对象,使用@output公开出去;
  2. 父组件监听子组件@output出来的方法,然后处理事件。

代码:

// child 组件
  @Component({
   selector: 'app-child',
   template: '',
   styles: [``]
  })
  export class AppChildComponent implements OnInit {
   @Output() onVoted: EventEmitter<any> = new EventEmitter();
   ngOnInit(): void {
    this.onVoted.emit(1);
   }
  }
  // parent 组件
  @Component({
   selector: 'app-parent',
   template: `
    <app-child (onVoted)="onListen($event)"></app-child>
   `,
   styles: [``]
  })
  export class AppParentComponent implements OnInit {
   ngOnInit(): void {
    throw new Error('Method not implemented.');
   }
   onListen(data: any): void {
    console.log('TAG' + '---------->>>' + data);
   }
  }

使用@ViewChild和@ViewChildren:

场景:一般用于父组件给子组件传递信息,或者父组件调用子组件的方法;

步骤:

  1. 父组件里面使用子组件;
  2. 父组件里面使用@ViewChild获得子组件对象。
  3. 父组件使用子组件对象操控子组件;(传递信息或者调用方法)。

代码:

// 子组件
@Component({
 selector: 'app-child',
 template: '',
 styles: [``]
})
export class AppChildComponent2 implements OnInit {
  data = 1;
  ngOnInit(): void {
 }
 getData(): void {
  console.log('TAG' + '---------->>>' + 111);
 }
}
// 父组件
@Component({
 selector: 'app-parent2',
 template: `
  <app-child></app-child>
 `,
 styles: [``]
})
export class AppParentComponent2 implements OnInit {
 @ViewChild(AppChildComponent2) child: AppChildComponent2;
 ngOnInit(): void {
  this.child.getData(); // 父组件获得子组件方法
  console.log('TAG'+'---------->>>'+this.child.data);// 父组件获得子组件属性
 }
}

非父子组件参数传递与通讯方法

通过路由参数

场景:一个组件可以通过路由的方式跳转到另一个组件 如:列表与编辑

步骤:

  1. A组件通过routerLink或router.navigate或router.navigateByUrl进行页面跳转到B组件
  2. B组件接受这些参数

此方法只适用于参数传递,组件间的参数一旦接收就不会变化

代码

传递方式

routerLink

<a routerLink=["/exampledetail",id]></a>

routerLink=["/exampledetail",{queryParams:object}]

routerLink=["/exampledetail",{queryParams:'id':'1','name':'yxman'}];

router.navigate

this.router.navigate(['/exampledetail',id]);
this.router.navigate(['/exampledetail'],{queryParams:{'name':'yxman'}});

router.navigateByUrl

this.router.navigateByUrl('/exampledetail/id');
this.router.navigateByUrl('/exampledetail',{queryParams:{'name':'yxman'}});

传参方传参之后,接收方2种接收方式如下:

snapshot

import { ActivateRoute } from '@angular/router';
public data: any;
export class ExampledetailComponent implements OnInit { 
  constructor( public route: ActivateRoute ) { };
  ngOnInit(){
    this.data = this.route.snapshot.params['id'];
  };
}

queryParams

import { ActivateRoute } from '@angular/router';
export class ExampledetailComponent implements OnInit { 
  public data: any;
  constructor( public activeRoute:ActivateRoute ) { };
  ngOnInit(){
    this.activeRoute.queryParams.subscribe(params => {
    this.data = params['name'];
  });
};

使用服务Service进行通信,即:两个组件同时注入某个服务

场景:需要通信的两个组件不是父子组件或者不是相邻组件;当然,也可以是任意组件。

步骤:

  1. 新建一个服务,组件A和组件B同时注入该服务;
  2. 组件A从服务获得数据,或者想服务传输数据
  3. 组件B从服务获得数据,或者想服务传输数据。

代码:

// 组件A
  @Component({
   selector: 'app-a',
   template: '',
   styles: [``]
  })
  export class AppComponentA implements OnInit {
   constructor(private message: MessageService) {
   }
   ngOnInit(): void {
    // 组件A发送消息3
    this.message.sendMessage(3);
    const b = this.message.getMessage(); // 组件A接收消息;
   }
  }
  // 组件B
  @Component({
   selector: 'app-b',
   template: `
    <app-a></app-a>
   `,
   styles: [``]
  })
  export class AppComponentB implements OnInit {
   constructor(private message: MessageService) {
   }
   ngOnInit(): void {
    // 组件B获得消息
    const a = this.message.getMessage();
    this.message.sendMessage(5); // 组件B发送消息
   }
  }

消息服务模块

场景:这里涉及到一个项目,里面需要实现的是所有组件之间都有可能通信,或者是一个组件需要给几个组件通信,且不可通过路由进行传参。

设计方式:

  1. 使用RxJs,定义一个服务模块MessageService,所有的信息都注册该服务;
  2. 需要发消息的地方,调用该服务的方法;
  3. 需要接受信息的地方使用,调用接受信息的方法,获得一个Subscription对象,然后监听信息;
  4. 当然,在每一个组件Destory的时候,需要
this.subscription.unsubscribe();

代码:

// 消息中专服务
  @Injectable()
  export class MessageService {
   private subject = new Subject<any>();
   /**
   * content模块里面进行信息传输,类似广播
   * @param type 发送的信息类型
   *    1-你的信息
   *    2-你的信息
   *    3-你的信息
   *    4-你的信息
   *    5-你的信息
   */
   sendMessage(type: number) {
    console.log('TAG' + '---------->>>' + type);
    this.subject.next({type: type});
   }
   /**
   * 清理消息
   */
   clearMessage() {
    this.subject.next();
   }
   /**
   * 获得消息
   * @returns {Observable<any>} 返回消息监听
   */
   getMessage(): Observable<any> {
    return this.subject.asObservable();
   }
  }
  // 使用该服务的地方,需要注册MessageService服务;
  constructor(private message: MessageService) {
  }
  // 消息接受的地方;
  public subscription: Subscription;
  ngAfterViewInit(): void {
    this.subscription = this.message.getMessage().subscribe(msg => {
     // 根据msg,来处理你的业务逻辑。
    })
   }

   // 组件生命周期结束的时候,记得注销一下,不然会卡;
   ngOnDestroy(): void {
    this.subscription.unsubscribe();
   }

   // 调用该服务的方法,发送信息;
   send():void {
    this.message.sendMessage(‘我发消息了,你们接受下'); // 发送信息消息
   }

这里的MessageService,就相当于使用广播机制,在所有的组件之间传递信息;不管是数字,字符串,还是对象都是可以传递的,而且这里的传播速度也是很快的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
Vue的Options用法说明
Aug 14 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 #Javascript
JavaScript中立即执行函数实例详解
Nov 04 #Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 #Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 #Javascript
简述Angular 5 快速入门
Nov 04 #Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 #Javascript
vue中使用localstorage来存储页面信息
Nov 04 #Javascript
You might like
用定制的PHP应用程序来获取Web服务器的状态信息
2006/10/09 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
Angular2 组件通信的实例代码
2017/06/23 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
实习协议书
2015/01/27 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
通讯稿范文
2015/07/22 职场文书
2015年四年级班主任工作总结
2015/10/22 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript