Un guide de base pour comprendre les composants en angulaire

Les composants angulaires constituent la base des applications angulaires, offrant un moyen de créer des parties modulaires et réutilisables de l'interface utilisateur. Dans ce guide, nous aborderons les bases des composants angulaires, de leur structure aux meilleures pratiques. Que vous soyez nouveau sur Angular ou que vous recherchiez un rappel, cet article vous donnera une compréhension de base des composants dans Angular.

Qu'est-ce qu'un composant angulaire ?

Dans Angular, un composant est une classe qui contrôle une partie de l'interface utilisateur (UI). Pensez aux boutons, aux onglets, aux entrées, aux formulaires et aux tiroirs (n'importe quel élément de l'interface utilisateur en fait). Chaque composant est autonome et se compose de :

1. Modèle HTML : définit la disposition et la structure de l'interface utilisateur.
2. Styles CSS : définit l'apparence et les styles du composant.
3. Classe TypeScript : contient la logique et les données du composant.
4. Métadonnées : fournit des détails de configuration permettant à Angular de reconnaître et d'utiliser le composant.

Les composants sont essentiels à la création d'une application modulaire, car chacun peut représenter une partie spécifique d'une page, comme un en-tête, une barre latérale ou une carte.

Structure de base d'un composant angulaire

Un composant angulaire est défini à l'aide du décorateur @Component, qui le configure avec le modèle, les styles et le sélecteur nécessaires. Voici un exemple simple :

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title: string = 'Hello, Angular!';

  getTitle() {
    return this.title;
  }
}

Dans cet exemple :

• selector est la balise HTML représentant le composant.
• templateUrl pointe vers le fichier modèle HTML.
• styleUrls fait référence aux fichiers CSS du composant.
• La classe SampleComponent contient les données et la logique du composant.

Structure typique des dossiers de composants

Les projets angulaires organisent généralement les composants avec leurs fichiers associés dans un seul dossier, créé automatiquement lors de l'utilisation de la CLI Angular. Une structure de dossiers typique pour un composant comprend :

• example.component.ts : définit la classe TypeScript.
• example.component.html : contient le modèle HTML.
• example.component.css : contient les styles de composants.
• example.component.spec.ts : Contient les tests du composant.

Cycle de vie des composants

Les composants angulaires ont un cycle de vie avec des hooks qui permettent aux développeurs d'effectuer des actions à différentes étapes. Les hooks de cycle de vie couramment utilisés incluent :

• ngOnInit : Appelé après l'initialisation du composant.
• ngOnChanges : déclenché lorsqu'une propriété liée aux données change.
• ngOnDestroy : invoqué juste avant qu'Angular ne détruise le composant.

Par exemple, voici comment ngOnInit est utilisé :

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title: string = 'Hello, Angular!';

  getTitle() {
    return this.title;
  }
}

Les hooks de cycle de vie offrent une flexibilité, facilitant la gestion de la logique à des étapes spécifiques du cycle de vie d'un composant.

Communication entre les composants

Dans les applications du monde réel, les composants doivent souvent interagir les uns avec les autres pour partager des données ou déclencher des actions. Angular propose plusieurs méthodes de communication entre les composants :

1. @Input et @Output

• @Input : Permet à un composant parent de transmettre des données à un composant enfant.
• @Output : Permet à un composant enfant d'envoyer des événements à son parent.

Exemple :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-lifecycle',
  template: '<p>Lifecycle example</p>',
})
export class LifecycleComponent implements OnInit {
  ngOnInit() {
    console.log('Component initialized!');
  }
}

// child.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Send Message</button>`,
})
export class ChildComponent {
  @Input() childMessage: string;
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Message from child!');
  }
}

2. Communication basée sur les services

Lorsque les composants ne sont pas dans une relation parent-enfant, les services Angular offrent un moyen simple de partager des données et de la logique. Les services sont singleton par défaut, ce qui signifie qu'une seule instance existe dans l'application.

<!-- parent.component.html -->
<app-child [childMessage]="parentMessage" (messageEvent)="receiveMessage($event)"></app-child>

Utilisation du service dans différents composants :

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private messageSource = new BehaviorSubject<string>('Default Message');
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

// component-one.ts
import { Component } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-component-one',
  template: `<button (click)="changeMessage()">Change Message</button>`,
})
export class ComponentOne {
  constructor(private sharedService: SharedService) {}

  changeMessage() {
    this.sharedService.changeMessage('Hello from Component One');
  }
}

Meilleures pratiques pour les composants angulaires

1. Responsabilité unique : assurez-vous que chaque composant a une responsabilité pour améliorer la lisibilité et la maintenabilité.
2. Modules de fonctionnalités : organisez les composants associés dans des modules de fonctionnalités, ce qui facilite le chargement paresseux.
3. Optimiser la détection des modifications : utilisez la détection des modifications OnPush pour les composants qui ne sont pas mis à jour fréquemment afin d'améliorer les performances.
4. Limiter l'utilisation des services pour la communication : bien que les services soient précieux pour le partage de données, une dépendance excessive à leur égard peut conduire à un code étroitement couplé. Utilisez @Input et @Output pour la communication parent-enfant autant que possible.
5. Simplifier les modèles : gardez les modèles aussi simples que possible, en déplaçant la logique complexe dans la classe de composants.

Conclusion

Les composants angulaires sont au cœur de la création d'applications évolutives et modulaires. En comprenant leur structure, leur cycle de vie et leurs méthodes de communication, vous pouvez créer des applications efficaces et maintenables, faciles à comprendre et à exploiter.

Dans le prochain article, nous aborderons plus en détail le cycle de vie des composants angulaires, en explorant chaque hook et comment il peut être utilisé pour gérer efficacement les composants. Restez à l'écoute pour un aperçu plus approfondi des puissantes fonctionnalités de cycle de vie d'Angular !

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!