Detailed explanation of value transfer and communication between angular components

This time I will bring you a detailed explanation of the use of value transfer and communication between angular components. What are the precautions for value transfer and communication between angular components. The following is a practical case. Let’s take a look. .

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: Communication can be carried out between parent and child components, generally used in child components to pass messages to parent components;

Steps:

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

2. The parent component listens to the method from the child component @output 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: '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);
   }
  }

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 the child component in the parent component

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

Non-parent-child component parameter passing and communication methods

Via Routing Parameters

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

Steps:

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

2. B component accepts these parameters

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

Code

Delivery method

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

After the parameter transmitter passes 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 service at the same time

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

Steps:

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

2. Component A obtains data from the service, or wants the service to transmit data

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

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 in which all components need to be able to communicate, or one 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 a message needs to be sent, call the method of the service;

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

4. Of course, when each component is Destoryed, you need

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('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(‘我发消息了，你们接受下'); // 发送信息消息
   }

The MessageService here is equivalent to using the broadcast mechanism to transfer information between all components; whether it is a number, string, or an object, it can be transferred. And the spread here is also very fast.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps of js encapsulation operation class

How to deal with the failure of the tag selected="selected" attribute

The above is the detailed content of Detailed explanation of value transfer and communication between angular components. For more information, please follow other related articles on the PHP Chinese website!