Snippet

Eigene strukturelle Direktiven mit typisierten Template-Guards

Eine eigene strukturelle Direktive ist nur so sicher wie die Typisierung ihres Template-Kontexts. `ngTemplateContextGuard` ist eine statische Type-Guard-Methode, die der Angular-Compiler zur Kompilierzeit (über den Ivy-Template-Type-Checker) aufruft, um zu prüfen, ob mit `let-foo` deklarierte Variablen im Template tatsächlich zur Kontext-Form passen, die `createEmbeddedView` ausgibt. Ohne sie kompiliert `<ng-template let-x>` selbst dann, wenn `x` auf dem Kontextobjekt gar nicht existiert — die Abweichung fällt erst zur Laufzeit auf. Zusammen mit `ngTemplateGuard_ifRole: 'binding'` sagt man dem Compiler zusätzlich, den Typ des gebundenen Ausdrucks selbst zu verengen, sodass der Template-Körper `role` als `string` sieht, nicht als `string | null`.

snippet.js

javascript

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
 
interface IfRoleContext {
  $implicit: boolean;
  ifRole: string;
}
 
@Directive({
  selector: '[ifRole]',
  standalone: true,
})
export class IfRoleDirective {
  private hasView = false;
 
  constructor(
    private templateRef: TemplateRef<IfRoleContext>,
    private viewContainer: ViewContainerRef,
  ) {}
 
  @Input() set ifRole(role: string) {
    const allowed = role === 'admin';
    if (allowed && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef, {
        $implicit: true,
        ifRole: role,
      });
      this.hasView = true;
    } else if (!allowed && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }
 
  static ngTemplateGuard_ifRole: 'binding';
 
  static ngTemplateContextGuard(
    dir: IfRoleDirective,
    ctx: unknown,
  ): ctx is IfRoleContext {
    return true;
  }
}

angular

Erklärung

interface IfRoleContext { $implicit: boolean; ifRole: string; }

Definiert die exakte Form, die den `let-`-Variablen im Template zur Verfügung steht — `$implicit` ist das, an das `let-x` ohne Namen bindet.

static ngTemplateGuard_ifRole: 'binding';

Weist den Compiler an, den gebundenen `ifRole`-Ausdruck selbst zu typprüfen und zu verengen, nicht nur den Template-Kontext.

static ngTemplateContextGuard(dir: IfRoleDirective, ctx: unknown): ctx is IfRoleContext

Ein reines Kompilierzeit-Type-Predicate; der Compiler ruft diese Signatur während der Typprüfung auf, sie läuft nie im Browser.

this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: true, ifRole: role })

Das tatsächliche Laufzeit-Kontextobjekt — seine Form muss exakt zu `IfRoleContext` passen, sonst wird der Guard zu einer Lüge, der der Compiler vertraut.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Eigene strukturelle Direktiven mit typisierten Template-Guards

Verwandt