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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
初识简单却不失优雅的Vue.js
Sep 12 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
vue实现全匹配搜索列表内容
Sep 26 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从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
js实时监听文本框状态的方法
2011/04/26 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
详解Python高阶函数
2020/08/15 Python
python爬虫---requests库的用法详解
2020/09/28 Python
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
年会活动策划方案
2014/01/23 职场文书
小组名称和口号
2014/06/09 职场文书
母亲节寄语大全
2015/02/27 职场文书
CAD实训总结范文
2015/08/03 职场文书