web-dev-qa-db-fra.com

Quelle est la différence entre le service et le composant dans Angular 2+?

Ils sont déclarés dans des lieux différents (déclarations et prestataires). Je sais que le service a @Injectable () à injecter au constructeur de composants qui utilisent ce service. Mais pourquoi doit-il en être ainsi? Pourquoi ne pouvons-nous pas simplement déclarer en un seul endroit? Quelles fonctionnalités l'un peut-il faire que l'autre ne peut pas?

angularservicedependency-injectioncomponents
12
ForcedFakeLaugh

Composant

Il s'agit essentiellement d'une classe avec un décorateur @Component qui indique angular que la classe est un composant.

Ils sont toujours associés à un modèle HTML et à certains CSS.

Lorsqu'une partie de html est répétée avec une fonctionnalité similaire, il est toujours préférable de la mettre dans un composant. Ce composant peut être appelé partout où la même fonctionnalité est requise.

Services

Ce sont des unités centrales pour certaines fonctions courantes de l'application.

Ce sont des classes simples avec des fonctions et des membres.

Utilisé lorsque - Duplication de code existe, Accès/stockage des données.

Aucun décorateur n'existe pour les services contrairement à @Component et @Directive. @Injectable est utilisé uniquement lorsqu'un service doit être utilisé par un composant, une directive ou un autre service.

21
Ravi Sankar Rao

Je suis assez nouveau pour Angular moi-même mais voici ma compréhension.

Composant

De la docs :

Les composants angulaires sont un sous-ensemble de directives. Contrairement aux directives, les composants ont toujours un modèle et un seul composant peut être instancié par élément dans un modèle.

Fondamentalement, un composant est un petit morceau de HTML, CSS et Javascript qui encapsule une partie de votre application que vous souhaitez afficher.

Un service

Un service fournit des fonctionnalités que vous pouvez utiliser dans plusieurs parties de votre application. Supposons que vous souhaitiez afficher des informations spécifiques sur un utilisateur sur plusieurs composants, mais que vous ne vouliez pas répéter le code, vous mettriez ce code dans un service. Vous injectez ensuite le service dans votre composant et appelez le code utilisateur affiché dans le composant, à partir du service.

Le décorateur @Injectable () est utilisé lorsque vous souhaitez injecter d'autres services dans le service en cours de décoration, et vous n'avez pas besoin de l'inclure lorsque vous utilisez le service dans votre composant.

16
tgrass12

Différence principale

"Lorsque nous voulions accéder à la méthode d'un composant dans un autre, nous devons créer l'objet et y accéder. Mais, @ Injectable nous indique les méthodes de service auxquelles nous pouvons accéder simplement en injectant le service dans le constructeur ( ) Parce que le service est Singleton, je répète que le service est Singleton. c'est-à-dire qu'un seul objet de chaque service est disponible dans toute l'application.

Exemple: constructeur (http privé: HttpClient, toastService privé: ToastService)

ici, je viens de créer une variable de type HttpClient et d'accéder aux méthodes get/post/put. ToastService est mon service privé pour accéder à mes propres services.

Composant

J'espère que vous savez, dans AngularJS, nous avions l'habitude d'écrire un fichier script.js séparé pour gérer les événements, écrire des méthodes, appeler l'api ou valider, puis nous accédons à ce fichier en html comme ceci

nous utilisons @ Component pour Component. Ainsi, le composant est juste comme un fichier de script avec des fonctionnalités supplémentaires ajoutées. tels que, nous pouvons exporter des composants et les utiliser n'importe où dans l'application, Angular 2 Fonctionnalités orientées objet fournies et plutôt que d'importer des scripts externes, des fichiers css, ils ont fourni un support pour cela, etc.

@Component( {
    selector: 'app-unit',
    templateUrl: './unit.component.html',
    styleUrls: ['./unit.component.css']
} )

export class MyComponent implements OnInit { 
constructor( private http: HttpClient , private toastService: ToastService) { }

ngOnInit() {
    this.fetchAllUnit();
}

}

Prestations de service

Nous utilisons @ Injectable pour les services. Les services sont utilisés pour les méthodes courantes de certaines fonctions communes aux différents composants. Ce sont des classes simples avec des fonctions et des membres pas du contenu html. Utilisé quand - voulait réduire la duplication de code, accéder ou stocker des données.

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

@Injectable( {
    providedIn: 'root'
} )
export class ToastService {

    constructor() { }

    public error( msg ) {

        M.toast( { html: msg, classes: 'red darken-2 rounded' } );

    }
    public success( msg ) {
        M.toast( { html: msg, classes: 'green lighten-1 rounded' } );

    }

    public warning( msg ) {

        M.toast( { html: msg, classes: 'yellow darken-4 rounded' } );

    }
}

Votre commentaire sera le bienvenu.

6
Deva