Exemples détaillés de transfert de valeur et de méthodes de communication entre différents composants dans Angular

Cet article présente principalement les méthodes de transfert de valeur et de communication entre les différents composants dans Angular. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

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 : Oui Pour communiquer entre les composants parent et enfant, le composant enfant est généralement utilisé pour transmettre des messages au composant parent

Étapes :

1. Le composant enfant crée un événement ; EventEmitter et utilise @output pour l'exposer. Sortez

2. Le composant parent écoute la méthode @output du composant enfant, 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: &#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);
   }
  }

Utilisation de @ViewChild et @ViewChildren :

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

Étapes :

1. Utiliser le sous-composant ; -composants dans les composants parents ;

2. Utilisez @ViewChild dans le composant parent pour obtenir l'objet du composant enfant.

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

Passer les paramètres du composant non parent-enfant et méthode de communication

Grâce aux 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 passe au composant B via routerLink ou router.navigate ou router.navigateByUrl

2. Le composant B accepte ces paramètres

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

Code

Méthode de transfert

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

Une fois que la partie chargée du transfert des 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 le service Service pour communiquer, c'est-à-dire : deux composants injectent un service en même temps

Scénario : deux composants qui doivent communiquer. Ce n'est pas un composant parent-enfant ou un composant adjacent bien sûr, cela peut aussi être n'importe quel composant ;

Étapes :

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

2. Le composant A part du service Obtenir des données ou souhaite transmettre des données au service

3. Le composant B obtient des données du service ou souhaite transmettre des données au 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发送消息
   }
  }

Module de service de messagerie

Scénario : ici Lorsqu'il s'agit d'un projet, ce qu'il faut mettre en œuvre, c'est la possibilité de communication entre tous les composants, 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

Là où vous avez besoin d'envoyer un message, appelez la méthode de réception des informations,
Utilisez là où vous avez besoin de recevoir des informations, appelez la méthode de réception des informations, obtenez un objet Abonnement, et puis écoutez les informations
Bien sûr, lors de la destruction de chaque composant,

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 ici la vitesse de propagation 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(&#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;); // 发送信息消息
   }

Recommandations associées :

Un exemple de la façon dont express obtient les valeurs get et post et la vérification de session dans nodejs

Partage de deux méthodes de transmission dynamique des valeurs des composants parents Vue aux composants enfants

Explication détaillée de la façon d'utiliser fetch et de recevoir les valeurs transmises par JS