כיצד ליצור ולהשתמש ברכיבים משלך ב-Angular

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

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

שימוש ברכיבים ב-Angular

כאשר אתה יוצר רכיבים ביישום Angular, אתה יכול להשתמש בהם בתוך רכיבים אחרים. לדוגמה, תוכל ליצור רכיב עבור רכיב כרטיס ממשק משתמש גדול. לאחר מכן תוכל להשתמש ברכיב זה כתג HTML רגיל, בכל מקום שתרצה:

<app-new-component></app-new-component>

מכיוון שרכיבים הם סיביות קוד הניתנות לשימוש חוזר, אתה יכול גם להעביר משתנים כך שהנתונים עבור כל מופע יהיו שונים. אתה יכול גם ליצור רכיבים לדפים, ותוכל לנתב אליהם בהתאם באמצעות ה- app-routing.module.ts קוֹבֶץ.

אתה יכול לעצב את הרכיבים שלך על סמך מבנה היישום שלך, וכמה אתה רוצה להפריד בין הפונקציונליות שלך.

כיצד ליצור רכיב

אתה יכול להשתמש ב ngליצור פקודה כדי ליצור רכיב חדש.

1. ליצור חדש יישום זוויתי באמצעות חדש או לפתוח קיים.
2. פתח את שורת הפקודה או את המסוף. לחלופין, אם יש לך את אפליקציית Angular שלך פתוחה ב-
   instagram viewer
   IDE כגון Visual Studio Code, אתה יכול להשתמש במסוף המובנה.
3. במסוף, נווט אל המיקום של תיקיית השורש של הפרויקט. לדוגמה:

   CD C:\Users\Sharl\Desktop\Angular-Application

4. הפעל את ng ליצור רכיב פקודה, ואחריה שם הרכיב החדש:

   ng ליצור רכיב ui-card

5. הרכיב החדש ייווצר בתיקייה חדשה, בתוך src/app מַדרִיך.

כיצד להוסיף תוכן לרכיב הזוויתי

Angular יוצר כל רכיב עם קובץ HTML, CSS, TypeScript ו-Testing Specification.

• ה קובץ HTML מאחסן את תוכן ה-HTML של הרכיב.
• ה קובץ CSS מאחסן את הסגנון של הרכיב.
• ה קובץ מפרט בדיקה (spec.ts). מאחסן את כל בדיקות היחידה עבור הרכיב.
• ה קובץ TypeScript מאחסן את ההיגיון והפונקציונליות המגדירים את הרכיב.

הוסף תוכן כלשהו לרכיב ה-ui-card המותאם אישית.

1. לִפְתוֹחַ src/app/ui-card/ui-card.component.html, ועדכן את ה-HTML של הרכיב. ודא שיש לך תמונה עם אותו שם בתיקייה בשם src/assets/images ביישום Angular שלך. החלף את התוכן של ui-card.component.html עם העוקבים:

   <div class="כַּרְטִיס">
   <img src="./assets/images/blue-mountains.jpg" alt="גִלגוּל">
   <div class="מְכוֹלָה">
   <h4 class="כותרת"> הרים כחולים </h4>
   <ע> NSW, אוסטרליה </p>
   </div>
   </div>

2. לִפְתוֹחַ ui-card.component.css, והוסף תוכן CSS לרכיב:

   .כַּרְטִיס {
   צל קופסא: 0 4פיקסלים 8פיקסלים 0 rgba(0, 0, 0, 0.2);
   רוֹחַב: 400פיקסלים;
   ריפוד: 8פיקסלים;
   שולים: 24פיקסלים;
   צבע רקע: עשן לבן;
   משפחת גופן: פונט סאנס סריף;
   }
   .כַּרְטִיסimg {
   רוחב מקסימלי: 400פיקסלים;
   }
   .כותרת {
   ריפוד-טופ: 16פיקסלים;
   }
   .מְכוֹלָה {
   ריפוד: 2פיקסלים 16פיקסלים;
   }

3. ה ui-card.component.ts הקובץ כבר מכיל מחלקה עבור הרכיב החדש שבו אתה יכול להוסיף פונקציות חדשות, לוגיקה ופונקציונליות. זה אמור להיראות כך:

   יְצוּאמעמד UiCardComponent מיישם OnInit {
   בַּנַאִי() { }
    ngOnInit(): בָּטֵל {
   // הוסף קצת היגיון קוד כאן
    }
   // לחלופין, הוסף את ההיגיון והפונקציונליות שלך בפונקציות חדשות
   }

כיצד להשתמש ברכיב ב-HTML של רכיב אחר

בְּתוֹך ui-card.component.ts, ישנן שלוש תכונות: selector, templateUrl ו-styleUrl. ה-templateUrl מתייחס ל-HTML של הרכיב (ולכן מקשר לקובץ ה-HTML). התכונה styleUrls מתייחסת ל-CSS של הרכיב ולקישורים לקובץ ה-CSS.

@רְכִיב({
 בורר: 'app-ui-card',
 templateUrl: './ui-card.component.html',
 styleUrls: ['./ui-card.component.css']
})

כאשר אתה משתמש ברכיב כרטיס UI ברכיב אחר, תשתמש בשם הבורר "app-ui-card".

1. ראשית, הוסף תוכן כלשהו לדף האינטרנט שלך. לִפְתוֹחַ src/app/app.component.html והוסף סרגל ניווט:

   <div class="navbar-header">
   <כיתה="nav-title"><ב> סרגל הניווט באינטרנט </ב></א>
   </div>

2. הוסף קצת סטיילינג לסרגל הניווט שלך src/app/app.component.css:

   .navbar-header {
   צבע רקע: #07393C;
   ריפוד: 30פיקסלים 50פיקסלים;
   לְהַצִיג: לְהַגמִישׁ;
   align-items: מֶרְכָּז;
   משפחת גופן: פונט סאנס סריף;
   }
   .nav-title {
   טקסט-קישוט: אף אחד;
   צֶבַע: לבן;
   גודל גופן: 16pt;
   }
   

3. מתחת לסרגל הניווט פנימה app.component.html, הוסף כרטיס ממשק משתמש חדש. השתמש בשם הבורר "app-ui-card" כתג HTML:

   <app-ui-card></app-ui-card>

4. אתה יכול גם לעשות שימוש חוזר ברכיב על ידי הכללת התג מספר פעמים. לשם כך, החלף את השורה למעלה כדי להשתמש בתגי HTML מרובים של app-ui-card במקום זאת:

   <div style="תצוגה: flex">
   <app-ui-card></app-ui-card>
   <app-ui-card></app-ui-card>
   <app-ui-card></app-ui-card>
   </div>

5. הפעל את יישום ה-Angular שלך מהמסוף באמצעות ה- לשרת פקודה ופתח את האתר שלך בדפדפן אינטרנט.

כיצד להעביר פרמטרי קלט לתוך הרכיב

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

1. לְהוֹסִיף קֶלֶט לרשימת הייבוא ​​בראש ui-card.component.ts:

   יְבוּא { Component, Input, OnInit } מ '@זוויתי/core';

2. לאחר מכן הוסף שני משתני קלט בתוך UICardComponent מעמד. אלה יאפשרו לך לשנות את שם המיקום והתמונה המוצגים בכרטיס. לאכלס את ngOnInit לתפקד כפי שמוצג, כדי לבנות את הנתיב לתמונה או להשתמש בערך ברירת מחדל:

   יְצוּאמעמד UiCardComponent מיישם OnInit {
   @קֶלֶט() שם מיקום: חוּט;
   @קֶלֶט() שם תמונה: חוּט;
   בַּנַאִי() { }
    ngOnInit(): בָּטֵל {
   אם (זֶה.imageName) {
   זֶה.imageName = "./assets/images/" + זֶה.imageName;
    } אַחֵר {
   זֶה.imageName = "./assets/images/blue-mountains.jpg";
    }
    }
   }
   

3. ב ui-card.component.html, שנה את הערך המקודד הקשיח של כותרת 4 "Blue Mountains" כדי להשתמש במשתנה הקלט "locationName" במקום זאת. שנה גם את הקוד הקשיח src תכונה בתג התמונה כדי להשתמש במשתנה הקלט "imageName":

   <div class="כַּרְטִיס">
   <img src="{{imageName}}" alt="גִלגוּל">
   <div class="מְכוֹלָה">
   <h4 class="כותרת">{{שם מיקום? שם מיקום: 'הרים כחולים'}}</h4>
   <ע>NSW, אוסטרליה</p>
   </div>
   </div>

4. ב app.component.html, שנה את התגים "app-ui-card" כך שיכללו את הקלט "locationName" ו-"imageName". עבור כל רכיב של כרטיס ממשק משתמש, הזן ערך שונה. ודא שקובצי התמונה קיימים בתיקיית הנכסים/תמונות של יישום Angular שלך.

   <div style="תצוגה: flex">
   <app-ui-card [locationName]="'הרים כחולים'" [imageName]="'blue-mountains.jpg'"></app-ui-card>
   <app-ui-card [locationName]="'סידני'" [imageName]="'sydney.jpg'"></app-ui-card>
   <app-ui-card [locationName]="'ניוקאסל'" [imageName]="'newcastle.jpg'"></app-ui-card>
   </div>

5. הפעל את יישום ה-Angular שלך מהמסוף באמצעות ה- לשרת פקודה ופתח את האתר שלך בדפדפן אינטרנט.

ייתכן שתראה שגיאה בשלב זה לגבי מאפיינים אלה ללא אתחול. אם כן, פשוט הוסף או הגדר "strictPropertyInitialization": false אצלך tsconfig.json.

כיצד לנתב לרכיב חדש

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

1. לִפְתוֹחַ app-routing.module.ts. ייבא את רכיב כרטיס ממשק המשתמש בחלק העליון של הקובץ:

   יְבוּא { UiCardComponent } מ './ui-card/ui-card.component';

2. הוסף נתיב ניתוב למערך המסלולים:

   const מסלולים: מסלולים = [
   //... כל מסלול אחר שאולי תצטרך...
    { path: 'uicard', component: UiCardComponent },
   ]

3. החלף את כל התוכן הנוכחי ב app.component.html לכלול רק את ה-navbar ותג HTML של נתב-outlet. שקע הנתב מאפשר ניתוב בין דפים. הוסף היפר-קישור לסרגל הניווט, כאשר תכונת href מתאימה לנתיב במערך המסלולים:

   <div class="navbar-header">
   <כיתה="nav-title"><ב> סרגל הניווט באינטרנט </ב></א>
   <כיתה="nav-a-link" href="/uicard"><ב> כרטיס ממשק משתמש </ב></א>
   </div>
   <שקע נתב></router-outlet>
   

4. הוסף קצת סטיילינג לקישור כרטיס ממשק המשתמש החדש, ב app.component.css:

   .nav-a-link {
   טקסט-קישוט: אף אחד;
   צֶבַע: #4b6569;
   גודל גופן: 14pt;
   שוליים-שמאליים: 60פיקסלים;
   משקל גופן: קל יותר;
   }

5. הפעל את יישום ה-Angular שלך מהמסוף באמצעות ה- לשרת פקודה ופתח את האתר שלך בדפדפן אינטרנט. הקישור יופיע בסרגל הניווט בדף האינטרנט.
6. שים לב לכתובת ה-URL בדפדפן האינטרנט שלך. כברירת מחדל, זה בדרך כלל http://localhost: 4200/. כאשר תלחץ על הקישור לכרטיס ממשק המשתמש, הדף ינותב אל http://localhost: 4200/uicard, וכרטיס ה-UI יופיע.

יצירת רכיבים ב-Angular

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

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

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