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

 更新时间:2017年11月04日 17:07:52   作者:xiaoming  
本篇文章主要介绍了angular中不同的组件间传值与通信的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文主要介绍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,就相当于使用广播机制,在所有的组件之间传递信息;不管是数字,字符串,还是对象都是可以传递的,而且这里的传播速度也是很快的。

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

相关文章

  • Angular2 http jsonp的实例详解

    Angular2 http jsonp的实例详解

    这篇文章主要介绍了Angular2 http jsonp的实例详解的相关资料,希望通过本能帮助到大家,需要的朋友可以参考下
    2017-08-08
  • Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解

    我们在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间。这里的间隔可能很小,甚至让人感觉不到区别;但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面。本文将介绍Angular.js中处理页面闪烁的方法。
    2017-03-03
  • angular中不同的组件间传值与通信的方法

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

    本篇文章主要介绍了angular中不同的组件间传值与通信的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Angular中使用响应式表单的详细步骤

    Angular中使用响应式表单的详细步骤

    Angular提供了两种处理表单的方式模板驱动表单和响应式表单(也称为模型驱动表单),使用模板驱动表单时,模板指令被用来构建表单的内部表示,在本文中,您探讨了如何将响应式表单应用于一个示例 Angular 应用程序
    2024-02-02
  • 初学者AngularJS的环境搭建过程

    初学者AngularJS的环境搭建过程

    这篇文章主要介绍了初学者AngularJS的环境搭建过程,在文章给大家提到了Angular-cli的特性,大家一起看看吧
    2017-10-10
  • AngularJS 最常用的功能汇总

    AngularJS 最常用的功能汇总

    angularjs功能在项目开发中经常会用到,本文给大家总结了八种angularjs最常用的功能,感兴趣的朋友一起学习吧
    2016-02-02
  • AngularJS控制器继承自另一控制器

    AngularJS控制器继承自另一控制器

    本文给大家介绍AngularJS控制器继承自另一控制器的相关内容,小编认为介绍的非常不错,具有参考借鉴价值,感兴趣的朋友参考下吧
    2016-05-05
  • AngularJS实现单独作用域内的数据操作

    AngularJS实现单独作用域内的数据操作

    这篇文章给大家介绍了利用AngularJs如何实现ng-repeat内各个小的子作用域单独数据绑定。有需要的小伙伴们可以参考借鉴,下面来一起看看吧。
    2016-09-09
  • Angular.js实现注册系统的实例详解

    Angular.js实现注册系统的实例详解

    Angular.js是Google开发的前端技术框架,最近一直在学习Angular.js,通过对angular.js的简单理解后发现,angular.js通过一些简单的指令即可实现对DOM元素的操作,其特色为双向数据绑定,下面这篇文章给大家详细介绍Angular.js实现注册系统的方法,一起来看看吧。
    2016-12-12
  • 浅谈AngularJS中$http服务的简单用法

    浅谈AngularJS中$http服务的简单用法

    这篇文章主要介绍了浅谈AngularJS中$http服务的简单用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05

最新评论