Um IT-Projekte auf einem hohen Qualitäts-Niveau zu realisieren, bieten wir unseren Entwicklern im Rahmen des sifamo EE (Employee Empowerment) Programms die Möglichkeit der Eigenentwicklung an. Über maßgeschneiderte Roadmaps zur Weiterentwicklung der individuellen Fähigkeiten werden gezielte Schulungen vorgenommen.
Eines der Themen unserer Schulungen ist es die Strukturierung von Angular Modulen und Komponenten effektiv und nachhaltig zu gestalten.
Schauen wir uns mal eine Angular Komponente an.
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss']
})
export class ParentComponent {
}
Wir sehen hier eine Parent Komponente, diese soll nun einige Daten an eine Child-Komponente senden. Diese Child-Komponente soll nun folgendes Observable an eine Child Komponenten mit den beinhaltenden Daten senden.
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.scss']
})
export class ParentComponent {
constructor(private readonly myInternalService: MyInternalService){}
getMyData$ = (): Observable<MyData> => this.myInternalService.getAllMyData();
}
Die Daten kommen aus einem internen Service. Diese werden als Observable gehandelt. Die Child Komponente sieht wie folgt aus:
@Component({
selector: ‚app-child‘,
templateUrl: ‚./child.component.html‘,
styleUrls: [‚./child.component.scss‘]
})
export class ChildComponent {
@Input() myData: MyData;
}
Hier lässt sich schnell erkennen, dass die Child Komponente nur ein Objekt empfangen kann vom Typ MyData. Der Service liefert uns jedoch die Daten verpackt in einem Observable zurück.
Um dieses Observable aufzulösen, kann nun der sogenannte „async“-Pipe genutzt werden, welches über das Tempalte gesteuert wird. Schauen wir nun in die parent.component.html:
<app-child [myData]=“getMyData$() | async“></app-child>
Über diesen async-Pipe ergeben sich nun diverse Vorteile.
- „subscribe“ muss nicht manuell aufgerufen werden, jeder emit des Observables triggered das subscribe
- Beim Verlassen (OnDestroy) der Komponente wird das unsubscribe aufgerufen
- Die ChangeDetection wird gezielt aufgerufen und das Rendering entsprechend ausgelöst
Wie wir sehen können, spart man sich mit dem async Pipe jede Menge boilerplate Code. In den Projekten in denen wir die Strukturen und Architektur maßgeblich mitbestimmen schaffen wir es fast gänzlich ohne ein einziges „subscribe“ auszukommen.
Dies ist nur möglich, wenn man sich strikt an die Trennung von Service-Schicht, Parent- und Child-Komponenten hält, was auch gleichzeitig ein sehr gute Übersichtlichkeit produziert und den Code stets erweiterbar und skalierbar hält.
Ein nachhaltige Lösung in jeglicher Hinsicht, die sehr zu empfehlen ist.