Explication détaillée du transfert de valeur et de la communication entre les composants angulaires

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du transfert de valeur et de la communication entre les composants angulaires. Quelles sont les précautions pour le transfert de valeur et la communication entre les composants angulaires. cas pratique. Jetons un coup d'oeil.

Cet article présente principalement comment Angular transfère des valeurs​​et communique dans différents composants. Il est principalement divisé en composants parent-enfant et en composants non parent-enfant.

Paramètres et méthodes de communication entre les composants parent et enfant

Utiliser la communication événementielle (EventEmitter, @Output) :

Scénario : La communication peut être effectuée entre les composants parent et enfant, généralement utilisée dans les composants enfants pour transmettre des messages aux composants parents

; Étapes :

1. Le composant enfant crée un objet EventEmitter d'événement et l'expose à l'aide de @output ;

2. Le composant parent écoute la méthode du composant enfant @output puis gère l'événement.

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

Utilisez @ViewChild et @ViewChildren :

Scénario : généralement utilisé pour que les composants parents transmettent des informations aux composants enfants, ou pour que les composants parents appellent des méthodes de composants enfants

 ; Étapes :

1. Utilisez le composant enfant

2. dans le composant parent pour obtenir l'objet du composant enfant à l'aide de @ViewChild.

3. Le composant parent utilise l'objet du composant enfant pour manipuler le composant enfant (transmettre des informations ou appeler des méthodes).

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);// 父组件获得子组件属性
 }
}

Passer les paramètres des composants non parent-enfant et méthodes de communication

Pass paramètres de routage

Scénario : Un composant peut accéder à un autre composant via le routage, tel que : Liste et Édition

Étapes :

1. Le composant A utilise routerLink ou router.navigate ou router.navigateByUrl pour accéder au composant B

2. Le composant B accepte ces paramètres

Cette méthode ne convient qu'au transfert de paramètres. Une fois les paramètres reçus entre les composants, ils ne changeront pas

. Code

Mode de livraison

routerLink

<a routerLink=["/exampledetail",id]></a>
routerLink=["/exampledetail",{queryParams:object}]
routerLink=["/exampledetail",{queryParams:'id':'1','name':'yxman'}];

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

Une fois que l'émetteur de paramètres a transmis les paramètres, le récepteur dispose de deux méthodes de réception comme suit :

instantané

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

Utiliser Service pour communiquer, c'est à dire : deux composants injectent un service en même temps

Scénario : les deux composants qui doivent communiquer ne sont pas des composants parent-enfant ou des composants adjacents, ils peuvent bien sûr également être n'importe quel composant ;

Étapes :

1. Créez un nouveau service et injectez le composant A et le composant B dans le service en même temps

2. Le composant A obtient des données du service ou souhaite que le service transmette des données

3. Le composant B obtient des données du service Le service obtient des données ou souhaite que le service transmette des données.

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

Module de service de messagerie

Scénario : il s'agit d'un projet dans lequel tous les composants doivent pouvoir communiquer, ou un composant doit communiquer avec plusieurs composants, et les paramètres ne peuvent pas être transmis via le routage.

Méthode de conception :

1. Utilisez RxJs pour définir un module de service MessageService, et toutes les informations sont enregistrées auprès du service

2. Là où un message doit être envoyé, appelez la méthode du service ; >

   Utilisé là où les informations doivent être reçues, appeler la méthode de réception des informations, obtenir un objet d'abonnement, puis surveiller les informations

3. Bien sûr, lorsque chaque composant est détruit ; ,

4. Code :

this.subscription.unsubscribe();

Le MessageService équivaut ici à utiliser le mécanisme de diffusion pour transférer des informations entre tous les composants ; qu'il s'agisse d'un nombre, d'une

chaîne

ou d'un objet, il peut être transféré , et la propagation ici est également très rapide.

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! Lecture recommandée :

Explication détaillée des étapes de la classe d'opération d'encapsulation js

Comment gérer l'attribut de balise invalide selected="selected"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!