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 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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 has encountered an Access Violation
2007/01/15 PHP
php 分页函数multi() discuz
2009/06/21 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
《挑山工》的教学反思
2014/02/16 职场文书
投标承诺书怎么写
2014/05/24 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
2014年宣传工作总结
2014/11/18 职场文书
求职简历自我评价范文
2015/03/10 职场文书
工作收入证明范本
2015/06/12 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
Redis全局ID生成器的实现
2022/06/05 Redis