El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Interacció de components

Següent ►
►

En aquest tema, aprendrem com els components d'Angular poden comunicar-se entre ells. La interacció de components és una part fonamental del desenvolupament d'aplicacions Angular, ja que permet que els components comparteixin dades i es coordinin per oferir una experiència d'usuari coherent.

Objectius

  • Comprendre els diferents mètodes d'interacció entre components.
  • Aprendre a passar dades de pares a fills i de fills a pares.
  • Utilitzar serveis per a la comunicació entre components no relacionats.

Mètodes d'interacció entre components

  1. Passar dades de pares a fills

Per passar dades d'un component pare a un component fill, utilitzem propietats d'entrada (@Input). Aquestes propietats permeten que el component fill rebi dades del component pare.

Exemple

Component Pare (parent.component.ts):

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

@Component({
  selector: 'app-parent',
  template: `
    <h1>Component Pare</h1>
    <app-child [childMessage]="parentMessage"></app-child>
  `
})
export class ParentComponent {
  parentMessage = "Hola des del component pare!";
}

Component Fill (child.component.ts):

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

@Component({
  selector: 'app-child',
  template: `
    <h2>Component Fill</h2>
    <p>{{ childMessage }}</p>
  `
})
export class ChildComponent {
  @Input() childMessage: string;
}

En aquest exemple, el component pare (ParentComponent) passa la variable parentMessage al component fill (ChildComponent) mitjançant la propietat d'entrada childMessage.

  1. Passar dades de fills a pares

Per passar dades d'un component fill a un component pare, utilitzem esdeveniments de sortida (@Output) i l'objecte EventEmitter.

Exemple

Component Pare (parent.component.ts):

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

@Component({
  selector: 'app-parent',
  template: `
    <h1>Component Pare</h1>
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
    <p>Missatge del fill: {{ message }}</p>
  `
})
export class ParentComponent {
  message: string;

  receiveMessage($event) {
    this.message = $event;
  }
}

Component Fill (child.component.ts):

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

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

  sendMessage() {
    this.messageEvent.emit('Hola des del component fill!');
  }
}

En aquest exemple, el component fill (ChildComponent) emet un esdeveniment amb un missatge quan es fa clic al botó. El component pare (ParentComponent) escolta aquest esdeveniment i actualitza la seva propietat message amb el valor rebut.

  1. Comunicació entre components no relacionats

Per comunicar-se entre components que no tenen una relació pare-fill, utilitzem serveis. Els serveis permeten compartir dades i funcionalitats entre components de manera eficient.

Exemple

Servei (message.service.ts):

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

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

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

Component A (component-a.component.ts):

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-component-a',
  template: `
    <h1>Component A</h1>
    <button (click)="newMessage()">Enviar Missatge</button>
  `
})
export class ComponentA {
  constructor(private messageService: MessageService) {}

  newMessage() {
    this.messageService.changeMessage('Hola des del Component A!');
  }
}

Component B (component-b.component.ts):

import { Component, OnInit } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-component-b',
  template: `
    <h1>Component B</h1>
    <p>{{ message }}</p>
  `
})
export class ComponentB implements OnInit {
  message: string;

  constructor(private messageService: MessageService) {}

  ngOnInit() {
    this.messageService.currentMessage.subscribe(message => this.message = message);
  }
}

En aquest exemple, el MessageService s'utilitza per compartir un missatge entre ComponentA i ComponentB. Quan ComponentA canvia el missatge, ComponentB rep la nova informació.

Exercicis pràctics

Exercici 1: Passar dades de pares a fills

  1. Crea un component pare i un component fill.
  2. Passa una cadena de text del component pare al component fill utilitzant @Input.
  3. Mostra la cadena de text al component fill.

Exercici 2: Passar dades de fills a pares

  1. Crea un component pare i un component fill.
  2. Emmet un esdeveniment des del component fill amb un missatge utilitzant @Output i EventEmitter.
  3. Captura l'esdeveniment al component pare i mostra el missatge rebut.

Exercici 3: Comunicació entre components no relacionats

  1. Crea dos components no relacionats (per exemple, ComponentA i ComponentB).
  2. Crea un servei que permeti compartir un missatge entre aquests components.
  3. Canvia el missatge des de ComponentA i mostra el missatge actualitzat a ComponentB.

Resum

En aquesta secció, hem après com els components d'Angular poden comunicar-se entre ells utilitzant propietats d'entrada (@Input), esdeveniments de sortida (@Output), i serveis. Aquests mètodes ens permeten construir aplicacions Angular modulars i ben organitzades, on els components poden compartir dades i funcionalitats de manera eficient.

◄ Anterior
◄
Següent ►
►

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats