עידן יצחקיבחלק הזה נראה איך להעביר מידע בין רכיבים, בלי קשר לאיזה מיקרו פרונטאנד הם שייכים. זיכרו שכל אתר מיקרו הוא את שעומד ברשות עצמו ולא מכיר את שאר אתרי המיקרו ולכן יש צורך להשתמש באלמנטים כללים אשר כל האתר חולק בהם.
יש מספר דרכים לעשות את זה, אני חושב שזה מאוד תלוי בצורך של האתר ולפעמים יש צורך לשלב בין מספר צורות של חיבור למידע.
השתיים המועדפות עליי הם:
- EVENT
- LOCAL STORAGE
אנחנו נראה איך להעביר מידע ב-EVENT בין הרכיבים.
נייצר אירוע ב-MFE1 ונשלח אותו לכל מי שיקשיב לארוע, במקרה שלנו זה יהיה MFE2.
MFE1
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-part-one',
templateUrl: './part-one.component.html',
styleUrls: ['./part-one.component.scss']
})
export class PartOneComponent implements OnInit {
@Input() data: string = '';
constructor() { }
ngOnInit(): void {
}
sendData() {
const event = new CustomEvent("myEvent", {
detail: {
myData: {
name: 'part-one',
info: 'data origin'
}
}
});
document.dispatchEvent(event);
}
}
<p>part-one works!</p>
Data: {{data}}
<div>
<button (click)="sendData()">SEND DATA</button>
</div>TS:
שורה 14: זו הפונקציה שבה הכל קורה, זו הפונקציה שהכפתור ב-HTML יפעיל בלחיצה עליו.
שורה 15: יצירה של אירוע מיוחד שיכול לכלול בתוכו מידע שאנחנו מחליטים עליו. myEvent זה שם האירוע שאליו יצטרכו להירשם כדי לקבל את המידע בזמן ההפצה שלו.
שורה 16: detail זו תכונה מובנת בתוך customEvent. שם ניתן להעביר כל מידע שנרצה.
שורה 17 – 20: אובייקט שהמצאתי ואפשר להחליף אותו בכל מידע שתרצו להעביר.
שורה 23: זו השורה שתפיץ את האירוע.
HTML:
שורה 3 – 5: יצירה של כפתור להפעלת הפונקצה שיצרנו.
MFE2
import { Component, OnDestroy, OnInit } from '@angular/core';
@Component({
selector: 'app-main-content',
templateUrl: './main-content.component.html',
styleUrls: ['./main-content.component.scss']
})
export class MainContentComponent implements OnInit, OnDestroy {
eventData: any;
constructor() { }
private listenerFnc = (customEvent: Event) => {
const { detail } = customEvent as CustomEvent || {};
this.onEvent(detail);
}
ngOnInit(): void {
document.addEventListener('myEvent', this.listenerFnc);
}
onEvent(data: any) {
this.eventData = data;
}
ngOnDestroy(): void {
document.removeEventListener('myEvent', this.listenerFnc);
}
}
<p>main-content works!</p>
<pre>
{{eventData|json}}
</pre>TS:
שורה 9: משתנה כללי להצגת המידע שהתקבל ב-HTML.
שורה 11: הכנסה של הפונקציה למשתנה כדי שבהמשך נוכל להתנתק מהאירוע.
שורה 12: יצירה של משתנה וחילוץ אוטומטי שלו מתוך האירוע. במידה שלא הגיע כלום, אז לאתחל אותו לאוביקט ריק.
שורה 13: הפעלה של פונקציה onEvent ושליחה של המידע שהתקבל מהאירוע לתוך הפונקציה.
שורה 16: רישום לאירוע בהקמת הרכיב.
שורה 18 – 20: פונקציה מקומית להפעלה והעברת המידע שהתקבל לתוך המשתנה המקומי שלנו.
שורה 21 – 23: בדומה ל-subscribe , הרישום לאירוע נשאר גם אחרי שהרכיב נהרס ולכן יש לבצע ניתוק יזום מהרישום כדי למנוע רישום נוסף כל פעם שהרכיב עולה מחדש.
על מנת לבצע את הניתוק, יש לספק את שם האירוע ואת הפונקציה עצמה ולכן הכנסנו אותה למשתנה, כדי שיהיה לנו קל להעביר אותה לניתוק.
HTML:
שורה 2 – 4: טריק נחמד שמציג על המסך את האוביקט בדיוק כמו שהוא נראה.
חברים, אני שמח להגיד שבשלב הזה סיימנו את המדריך הבסיסי לבניה של אתר בתצורת מספר פרויקטים שמשמשים כמיקרו-פרויקטים אשר מרכיבים ביחד כמו חלקי פאזל תמונה אחת גדולה.
כמו שראיתם, אם עובדים בצורה זו, יש צורך לחשוב קצת מחוץ לקופסא כדי שהכל ינגן ביחד וזה קצת שונה מאשר בפרויקט יחיד.🎶
אבל, אם מדובר על פרויקט גדול ומסורבל עם מספר צוותי פיתוח, זה יכול להיות כלי מצויין לעבודה.
במידה שאתם כן עובדים בתצורה הזו, תשתדלו לעשות חלוקה של הפרויקט לאיזורים לא תלויים אחד בשני כדי למזער את התלות אחד בשני והעברת מידע מאחד לשני. 🧭
בחלק הבא והאחרון (והוא ממש לא חובה) נראה את השינויים הקטנים בין גירסה הזאת של מודול פדראשיין לבין הגירסה החדשה שלו.
