Une brève discussion sur le composant/service dans Angular

Cet article vous présentera le composant/service dans Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

À propos du composant angulaire

portée de style CSS, Shadow DOM

Shadow DOM fait partie de la spécification HTML, qui permet aux développeurs d'encapsuler leur propre balisage HTML, leurs styles CSS et JavaScript. Lors de la création d'un composant de style, il peut être activé via les paramètres. [Recommandations de didacticiel associées : "tutoriel angulaire"]

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello World!</h1>
    <span class="red">Shadow DOM Rocks!</span>
  `,
  styles: [`
    :host {
      display: block;
      border: 1px solid black;
    }
    h1 {
      color: blue;
    }
    .red {
      background-color: red;
    }
  `],
  encapsulation: ViewEncapsulation.ShadowDom
})
class MyApp {
}

Valeurs facultatives de ViewEncapsulation :

• ViewEncapsulation.Emulated - encapsulé via le mécanisme d'empaquetage de style fourni par les composants angulaires , afin que le style du composant ne soit pas affecté par des influences externes. Il s'agit du paramètre par défaut d'Angular.
• ViewEncapsulation.Native - Utilisez les fonctionnalités natives de Shadow DOM. Mais vous devez déterminer si le navigateur le prend en charge.
• ViewEncapsulation.None - pas de Shadow DOM et pas de packaging de style

À propos du service angulaire

Le service agit comme un accès aux données, un traitement logique fonctions. Séparez les composants et les services pour améliorer la modularité et la réutilisabilité.

Service Singleton (singleton)

• Utiliser Angular CLI pour créer un service Un service singleton sera créé par défaut ; 🎜>
Déclarez l'attribut provideIn de @Injectable() en tant que root, qui est un service singleton.
• L'objet de service Singleton peut être utilisé pour stocker temporairement des variables globales. Pour les variables globales complexes, il est recommandé d'utiliser un composant de gestion d'état (state management - Ngrx).

mode forRoot()

Si plusieurs modules d'appel définissent des fournisseurs (services) en même temps, alors dans plusieurs modules de fonctionnalités Lorsque ce module sera chargé, ces services seront enregistrés à plusieurs endroits. Cela entraîne plusieurs instances du service et le service ne se comporte plus comme un singleton. Il existe plusieurs façons d'éviter cela :

Utilisez la syntaxe provideIn au lieu d'enregistrer le service dans le module.
• Services séparés dans leurs propres modules.
• Définissez respectivement les méthodes forRoot() et forChild() dans le module.

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de programmation ! !

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!