Partage de données entre les composants angulaires

Problème

En travaillant avec le framework Angular, nous décomposons notre application Web. Et par conséquent, nous avons une situation où nous devons transférer des données entre les composants.

@Contribution ()

Pour passer des données à un composant enfant, nous pouvons utiliser un décorateur @Input()



. Cela nous permettra de transmettre les données du composant parent au composant enfant. Regardons un exemple simple:

import { Input, Component} from '@angular/core';
      
@Component({
    selector: 'app-child',
    template: `<h1>Title: {{ title }}</h1>`
})
export class ChildComponent { 
    @Input() title: string;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dans le composant enfant, nous avons "décoré" la propriété dont nous avons besoin title



. N'oubliez pas d'importer le décorateur:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Il ne reste plus qu'à passer le paramètre title



au composant enfant depuis le parent:

import { Component } from '@angular/core';
      
@Component({
    selector: 'app-component',
    template: `<app-child [title]="title" [userAge]="age"></app-child>`
})
export class AppComponent { 
    public title = 'Hello world!';
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

[title]="title"



, title="Hello world"



. , ?

@Output()

@Output()



. , :

import { Component } from '@angular/core';
       
@Component({
    selector: 'app-counter',
    template: `<h1>Count: {{ count }}</h1>
              <app-add (buttonClick)="onAdd()"></app-add>`
})
export class AppCounter { 
    public count = 0;

public onAdd(): void {
    this.count++;
}

}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

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

@Component({
    selector: 'app-add',
    template: `<button (click)="add()"></button>`;
})
export class AppAdd { 
    @Output() buttonClick = new EventEmitter();

		public add(): void {
    	this.buttonClick.emit();
		}
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. AppAdd



click



, add()



. this.buttonClick.emit() buttonClick



AppCounter



. EventEmitter



:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

"", . :

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

@Component({
    selector: 'app-better-counter',
    template: `<h1>Count: {{ count }}</h1>
							<app-buttons (buttonClick)="onChange($event)"></app-buttons>`
})
export class BetterCounterComponent { 
    public count = 0;

		public onChange(isAdd: boolean): void {
      if (isAdd) {
        this.count++;
      } else {
          this.count--;
      }
	 }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

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

@Component({
    selector: 'app-buttons',
    template: `<button (click)="change(true)"></button>                
							 <button (click)="change(false)"></button>`
})
export class ButtonsComponent { 
    @Output() buttonClick = new EventEmitter<boolean>();

		public change(change: boolean): void {
    	this.buttonClick.emit(change);
		}
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

:

• new EventEmitter<
  
  
  
  boolean>()
  
  
  
  

  
  
  
  
  

• emit



this.buttonClick.emit(change)
  
  
  
  

  
  
  
  
  

• $event



(buttonClick)="onChange($event)"
  
  
  
  

  
  
  
  
  

@Input()



@Output()



, , , .., .

RxJs

. , :

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

@Injectable({
  providedIn: 'root',
})
export class SimpleService {
    public count$ = new Subject<number>();

		public changeCount(count: number) {
   		this.count$.next(count); 
  	}
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. count$



. - . Subject



. Subject



- , . , Subject



. , count



:

import { SimpleService } from './services/simple.service.ts';

@Component({
    selector: 'app-any',
    template: ``
})
export class AnyComponentComponent { 
    constructor(
          private readonly simpleService: SimpleService
    ) {}
  
  	public setAnyCount(): void {
      this.simpleService.changeCount(Math.random());
		}
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Math.random()



. :

import { Component, OnInit } from '@angular/core';
import { SimpleService } from './services/simple.service.ts';

@Component({
    selector: 'app-other',
    template: ``
})
export class OtherComponentComponent implements OnInit { 
    constructor(
       private readonly simpleService: SimpleService
    ) {}
  
    ngOnInit(): void {
      this.simpleService.count$.subscribe((count) => this.log(count));
    }

    private log(data: number): void {
  		console.log(data);
    }

}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

count



, count$.next(...)



- subscribe



. - . , , . , . log()



, . - , . , count$



OnDestroy



. unsubscribe()



:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SimpleService } from './services/simple.service.ts';
import { Subsription } from 'rxjs';

@Component({
    selector: 'app-other',
    template: ``
})
export class OtherComponentComponent implements OnInit, OnDestroy {
   	private subs: Subsription;

    constructor(
      private readonly simpleService: SimpleService
    ) {}

    ngOnInit(): void {
      this.subs = this.simpleService.count$.subscribe((count) => this.log(count));
    }

    ngOnDestroy(): void {
  		this.subs.unsubscribe();
		}

    private log(data: number): void {
  		console.log(data);
    }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

On peut s'abonner à de nombreux sujets à partir d'un composant, s'abonner au même sujet à partir de différents composants.

Résultat

Nous pouvons partager des données entre les composants en utilisant @Input()



, @Output()



et RxJs. Dans cet article, j'ai omis store



, car l'article est destiné aux débutants. Je vous conseille de pratiquer ce sujet pour améliorer vos compétences.