Detailed examples of value transfer and communication methods between different components in Angular

This article mainly introduces the methods of value transfer and communication between different components in Angular. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

This article mainly introduces how Angular transfers values ​​​​and communicates in different components. It is mainly divided into parent-child components and non-parent-child components.

Parameters and communication methods between parent and child components

Use event communication (EventEmitter, @Output):

Scenario: Yes To communicate between parent and child components, the child component is generally used to pass messages to the parent component;

Steps:

1. The child component creates an event EventEmitter object and uses @output to expose it Go out;

2. The parent component listens to the @output method of the child component, and then handles the event.

Code:

 // 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: &#39;app-parent&#39;,
   template: `
    <app-child (onVoted)="onListen($event)"></app-child>
   `,
   styles: [``]
  })
  export class AppParentComponent implements OnInit {
   ngOnInit(): void {
    throw new Error(&#39;Method not implemented.&#39;);
   }
   onListen(data: any): void {
    console.log(&#39;TAG&#39; + &#39;---------->>>&#39; + data);
   }
  }

Using @ViewChild and @ViewChildren:

Scenario : Generally used for parent components to pass information to child components, or for parent components to call methods of child components;

Steps:

1. Use child components in parent components;

2. Use @ViewChild in the parent component to obtain the child component object.

3. The parent component uses the child component object to control the child component; (pass information or call methods).

Code:

// 子组件
@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(&#39;TAG&#39;+&#39;---------->>>&#39;+this.child.data);// 父组件获得子组件属性
 }
}

Non-parent-child component parameter passing and communication method

Through routing parameters

Scenario: One component can jump to another component through routing, such as: list and edit

Steps:

1. A component jumps to B component through routerLink or router.navigate or router.navigateByUrl

2. ##B component accepts these parameters

This method is only suitable for parameter transfer. Once the parameters between components are received, they will not change.

Code

Transfer method

routerLink

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

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

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

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'}});

Pass parameter After passing the parameters, the receiver has two receiving methods as follows:

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'];
  });
};

Use service Service to communicate, that is: two components inject a certain service at the same time

Scenario: The two components that need to communicate are not parent-child components or are not adjacent components; of course, also Can be any component.

Steps:

1. Create a new service, and component A and component B inject the service at the same time;

2. Component A starts from the service Obtain data, or want to transmit data to the service

3. Component B obtains data from the service, or wants to transmit data to the service.

Code:

  // 组件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发送消息
   }
  }

Message service module

Scenario: This involves A project needs to implement the possibility of communication between all components, or a component needs to communicate with several components, and parameters cannot be passed through routing.

Design method:

1. Use RxJs to define a service module MessageService, and all information is registered with the service;

2. Where you need to send a message, call the method of the service;

3. Use it where you need to receive information, call the method of receiving the information, obtain a Subscription object, and then monitor the information;

4. Of course, when each component is Destroyed,

this.subscription.unsubscribe();

Code:

  // 消息中专服务
  @Injectable()
  export class MessageService {
   private subject = new Subject<any>();
   /**
   * content模块里面进行信息传输，类似广播
   * @param type 发送的信息类型
   *    1-你的信息
   *    2-你的信息
   *    3-你的信息
   *    4-你的信息
   *    5-你的信息
   */
   sendMessage(type: number) {
    console.log(&#39;TAG&#39; + &#39;---------->>>&#39; + 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(‘我发消息了，你们接受下&#39;); // 发送信息消息
   }

The MessageService here is equivalent to using the broadcast mechanism to transfer information between all components; whether it is a number, a string, or an object, it can be transferred, and the propagation speed here is also quickly.

Related recommendations:

Example to explain the method of express obtaining get and post values ​​and session verification in nodejs

Sharing of two methods of dynamically passing values ​​from vue parent components to child components

Detailed explanation of how to use fetch and how to receive JS values