Structural Directives

Structural Directives ב-Angular היא תכונה חזקה שלא נעשה בה שימוש מספיק לדעתי.
בואו ננסה לשנות את זה ולהראות לכם דוגמא חוזרת שניתן לפתור בצורה טובה יותר עם structural directive.

הבעיה

קוד שחוזר על עצמו עם *ngIf

בואו נבחן את הדוגמא הבאה:

user.service.tsuser.tsapp.component.ts

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { UserService } from './user.service';

@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-root",
template: `
  <header>
    <span *ngIf="userService.user$ | async; let user">
      hello {{ user.firstName }} {{ user.lastName }}
    </span>
  </header>
`
})
export class AppComponent {
constructor(
  public userService: UserService
) {}
}

Open Sandbox

בדוגמא הנ”ל יש לנו user.service.ts שיחזיק את המשתמש המחובר או null אם המשתמש לא מחובר.
ב- app.component.ts אנו משתמשים ב- userService כדי להציג את שם המשתמש אם המשתמש מחובר.

מקרה דומה נלקח מפרוייקט גדול בעולם האמיתי, שם סוג הלוגיקה של בדיקה האם המשתמש מחובר חוזר במקומות רבים, או בכלל לא בדיקה האם מחובר אלא פשוט הצגת נתונים שיש לנו על המשתמש המחובר.

אם יש לכם ngIf חוזר או צורך חוזר לקבל נתונים משירות ולהציג אותם בקומפוננטה, אז כדאי לשקול להשתמש ב- structural directive.

הפתרון

בואו ניצור structural directive שתטפל בלוגיקה של בדיקה האם המשתמש מחובר ואם כן תציג את ה template ותעביר את המשתמש לאותו ה template

app.module.tswith-user.directive.tsuser.service.tsuser.tsapp.component.ts

import { ChangeDetectionStrategy, Component } from "@angular/core";

@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-root",
template: `
  <header>
    <span *withUser="let user">
      hello {{ user.firstName }} {{ user.lastName }}
    </span>
  </header>
`
})
export class AppComponent {}

Open Sandbox

נשים לב שיצרנו structural directive שירנדר את ה template רק אם המשתמש מחובר, ה directive גם מספק את המשתמש ל template באמצעות המשתנה $implicit ולכן ניתן להשתמש במשתמש בקומפוננטה כך:

<span *withUser="let user">
  hello {{ user.firstName }} {{ user.lastName }}
</span>

כעת כל מקום שאני צריך את ה user אני לא צריך להכניס את ה user.service.ts ופשוט להשתמש ב- structural directive שיצרנו.
יעיל לא? structural directives הם דרך מדהימה לחסוך בלוגיקה חוזרת בקומפוננטות שלכם.