Shared service in angular
-
אני מנסה לעשות שירות משותף באנגולר לצורך העברת מידע בין ראוטרים שונים.
אני יודע שיש כל מיני דרכים להעביר את המידע, אבל אני מנסה להבין למה הקוד הבא לא עובד כראוי:
יש לי service בשם DataService שמכיל אובייקט בשם product
import { Injectable } from '@angular/core'; import { Product } from './product'; @Injectable({ providedIn: 'root' }) export class DataService { constructor() { this.product = { name: "Keyboard", id: 1 } } public product: Product; }
אני ניגש אליו מתוך appComponent
import { DataService } from './data.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { product; dataService: DataService; constructor(dataService: DataService) { this.dataService = dataService; this.product = this.dataService.product; this.dataService.product = { name: "Computer", id: 1 } } }
ואני מציג אותו ע"י ה app.component.html
{{product | json}}
ציפיתי שאחרי שאשנה את המופע של ה dataService.product ל "Computer" בשורה 14, גם ה this.product ישתנה.
כי הרי חיברנו אותם בשורה 11?
למעשה זה לא קורה.
מה ההסבר לזה? -
@מנצפך אמר בShared service in angular:
ציפיתי שאחרי שאשנה את המופע של ה dataService.product ל "Computer" בשורה 14, גם ה this.product ישתנה.
לא
אם היית עושה:this.dataService.product.name = "Computer";
אז זה היה עובד.
אבל יצרת אובייקט חדש. אזdataService.product
מצביע על החדש אבלthis.product
עדיין מצביע על הישן. -
@מנצפך כן, ברור. (אני לא מומחה ב-#C, אבל להבנתי זה כך).
אגב, אם אתה כותב ב-#C אז אתה חייב להכיר את ההבדל בין reference type ל-value type. אז גם ב-JS, אובייקט מתנהג כמו reference type, ו-primitive מתנהג כמו value type. אבל המצביע של האובייקט עובד כמו value type. לכן כאשר אתה כותב:this.product = this.dataService.product;
אתה מעתיק את המצביע.
לכן כאשר אתה משנה את הערך שלdataService.product
זה לא משפיע על הערך שלthis.product
.(מקווה שכוונתי פחות או יותר ברור...)
-
-
@מנצפך אמר בShared service in angular:
הערה צדדית, חלק מזה מיותר:
export class AppComponent { product; dataService: DataService; // מיותר constructor(dataService: DataService) { this.dataService = dataService; // מיותר this.product = this.dataService.product; this.dataService.product = { name: "Computer", id: 1 } } }
TS עושה את זה לבד, רק תגדיר אם זה פרטי או ציבורי
https://www.typescriptlang.org/play?#code/MYGwhgzhAECCAO8DCB7AtvFA7AplgLgN4CwAUNBdMNhPgE4Cuw+KdAFPAwEYgCWw0ACZh8YAMo46AN344AXNDBYAngEpCAXzIagA