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?
למעשה זה לא קורה.
מה ההסבר לזה? -
אני מנסה לעשות שירות משותף באנגולר לצורך העברת מידע בין ראוטרים שונים.
אני יודע שיש כל מיני דרכים להעביר את המידע, אבל אני מנסה להבין למה הקוד הבא לא עובד כראוי:
יש לי 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.(מקווה שכוונתי פחות או יותר ברור...)
-
@מנצפך כן, ברור. (אני לא מומחה ב-#C, אבל להבנתי זה כך).
אגב, אם אתה כותב ב-#C אז אתה חייב להכיר את ההבדל בין reference type ל-value type. אז גם ב-JS, אובייקט מתנהג כמו reference type, ו-primitive מתנהג כמו value type. אבל המצביע של האובייקט עובד כמו value type. לכן כאשר אתה כותב:this.product = this.dataService.product;אתה מעתיק את המצביע.
לכן כאשר אתה משנה את הערך שלdataService.productזה לא משפיע על הערך שלthis.product.(מקווה שכוונתי פחות או יותר ברור...)
-
אני מנסה לעשות שירות משותף באנגולר לצורך העברת מידע בין ראוטרים שונים.
אני יודע שיש כל מיני דרכים להעביר את המידע, אבל אני מנסה להבין למה הקוד הבא לא עובד כראוי:
יש לי 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:
הערה צדדית, חלק מזה מיותר:
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
שלום! נראה שהשיחה הזו מעניינת אותך, אבל עדיין אין לך חשבון.
נמאס לכם לגלול בין אותם הפוסטים בכל ביקור? כשנרשמים לחשבון, תמיד תחזרו בדיוק למקום שבו הייתם קודם, ותוכלו לבחור לקבל התראות על תגובות חדשות (בין אם במייל, ובין אם בהתראת פוש). תוכלו גם לשמור סימניות ולפרגן ב-upvote לפוסטים כדי להביע הערכה לחברי קהילה אחרים.
בעזרת התרומה שלך, הפוסט הזה יכול להיות אפילו טוב יותר 💗
הרשמה התחברות