1.1.2 dumb components - mertenhanisch/ng-architecture GitHub Wiki

Reactive-State Components sind nicht immer die richtige Wahl, manchmal reicht auch eine kleine, "dumme" Component ohne eigene Logik, die einfach nur dafür genutzt wird, ein (komplexeres) Objekt an verschiedenen Stellen in der Anwendung darzustellen. Die brauchen nur ein (ggf. auch mehrere) Input-Bindings und evtl. auch mehrere Output-Bindings, falls in der Component Buttons oder ähnliche Event-Auslöser vorhanden sind.

<ng-container *ngIf="item">
  ...
  <button type="button" (click)="deleteItem()">...</button>
  ...
</ng-container>

export interface ItemInput {
  itemId: string;
  ...
}

@Component({...})
export class ItemComponent {
  @Input() item: ItemInput = null;

  @Output deleteItem = new EventEmitter<string>();

  deleteItem(): void {
    if (this.item) {
      this.delete.emit(this.item.itemId);
    }
  }
}

Wenn man sich eine Library aus diesen Components zusammen stellt, lassen sie sich leicht innerhalb der ganzen Anwendung benutzen. Und wenn sich an diesen nicht so häufig etwas ändert, verringert man auch die Builddauer der eigentlichen Anwendung.

Benutzt man eine "dumb" Component innerhalb einer "reactive-state" Component, lassen sich die Output-Bindings leicht mit Actions verbinden, die dann ihre Arbeit machen können.