העברה של מידע נסתר בניווט אנגולר

נניח שאנחנו מעוניינים לעשות ניווט בעזרת routerLink לרכיב אחר, אבל מעוניינים להעביר מידע מבלי ללכלך את ה-URL ובנוסף גם לא מעוניינים לחשוף אותו למשתמש.

במקרה רגיל היינו מעבירים את המידע כך:

<a routerLink="/home/project-info/{{projectItem.id}}"> go to project </a>

ה-URL היה נראה כך:

http://localhost:4200/home/project-info/w3r5f64t

במקרה שאנחנו מדברים עליו, אנחנו לא מעוניינים שה-ID יכתב ב-URL ולכן נעביר אותו כך:

<a routerLink="/home/project-info" [state]="{id:projectItem.id}"> go to project </a>

אם נסתכל על ה-DOM זה יראה כך

<a _ngcontent-ng-c1962008861="" routerlink="/home/project-info" ng-reflect-router-link="/home/project-info" ng-reflect-state="[object Object]" href="/home/project-info"> go to project </a>

אפשר לראות שב-DOM הערך לא נראה אלא פשוט כתוב object.

לאחר לחיצה ה-URL יראה כך

http://localhost:4200/home/project-info

חשוב מאוד!! אם רוצים לקרוא את הפרמטר ששלחנו בצורה נסתרת, חובה לעשות את זה ב-constructor

 constructor(private router: Router) {
    console.log(this.router.getCurrentNavigation()?.extras.state);
  }

מה שנראה שמודפס זה

{
    "id": "w3r5f64t"
}

שימו לב שמדובר במידע שנשלח מרכיב לרכיב ולא נשמר בשום מקום, לכן במקרה של רענון הדף, הוא לא יהיה זמין יותר.

אפשר כמובן לאחסן אותו בדפדפן או בקוקי או פשוט לנווט את המשתמש חזרה למסך הקודם בכדי שילחץ שוב על הלינק המדובר.

פוסטים קשורים:

Angular nested routes אנגולר NavigationExtras – skipLocationChange מדריך angular standalone component חלק 2 מדריך angular standalone component חלק 1