Eine kurze Diskussion über Komponenten/Dienste in Angular

Dieser Artikel stellt Ihnen Komponenten/Dienste in Angular vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Über Angular Component

CSS-Stilbereich, Shadow DOM

Shadow DOM ist Teil der HTML-Spezifikation, die es Entwicklern ermöglicht, ihr eigenes HTML-Markup, CSS-Stile und JavaScript zu kapseln. Beim Erstellen einer Stilkomponente kann diese über die Einstellungen aktiviert werden. [Verwandte Tutorial-Empfehlungen: „angular Tutorial“]

@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 {
}

ViewEncapsulation Optionale Werte:

• ViewEncapsulation.Emulated – Kapseln Sie Komponenten über den von Angular bereitgestellten Stilverpackungsmechanismus, sodass der Stil der Komponente nicht durch äußere Einflüsse beeinflusst wird . Dies ist die Standardeinstellung von Angular.
• ViewEncapsulation.Native – Verwenden Sie native Shadow-DOM-Funktionen. Sie müssen jedoch prüfen, ob der Browser dies unterstützt.
• ViewEncapsulation.None – Kein Shadow-DOM und keine Stilverpackung

Über Angular Service

Service (Service) dient als Funktion des Datenzugriffs und der logischen Verarbeitung. Separate Komponenten und Dienste zur Verbesserung der Modularität und Wiederverwendbarkeit.

Singleton-Dienst (Singleton)

• Verwenden Sie Angular CLI, um einen Dienst zu erstellen. Standardmäßig wird ein Singleton-Dienst erstellt.
• Deklarieren Sie das bereitgestellte In-Attribut von @Injectable() als Root, bei dem es sich um einen Singleton handelt Service.
• Das Singleton-Dienstobjekt (Singleton) kann zum vorübergehenden Speichern globaler Variablen verwendet werden. Für komplexe globale Variablen wird die Verwendung der Zustandsverwaltungskomponente (Zustandsverwaltung – Ngrx) empfohlen.

forRoot()-Muster

Wenn mehrere aufrufende Module gleichzeitig Anbieter (Dienste) definieren, werden diese Dienste an mehreren Stellen registriert, wenn dieses Modul in mehrere Funktionsmodule geladen wird. Dies führt zu mehreren Instanzen des Dienstes und der Dienst verhält sich nicht mehr wie ein Singleton. Es gibt mehrere Möglichkeiten, dies zu verhindern:

• Verwenden Sie die ProvidedIn-Syntax, anstatt den Dienst im Modul zu registrieren.
• Teilen Sie Dienste in eigene Module auf.
• Definieren Sie die Methoden forRoot() bzw. forChild() im Modul.

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über Komponenten/Dienste in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!