מהי כריכה דו-כיוונית בזווית?

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

לאחר שתעביר נתונים מה-HTML לקובץ TypeScript, תוכל להשתמש בנתונים כדי להשלים לוגיקה עסקית מסוימת. תרחיש לדוגמה יהיה אם תרצה לבדוק אם השם שהוזן בשדה קלט כבר קיים.

כיצד ניתן להשתמש בכריכה דו-כיוונית?

כריכה דו-כיוונית באפליקציות Angular מוגדרת בדרך כלל ב- .html קובץ, באמצעות ה ngModel הוֹרָאָה. כריכה דו-כיוונית בצורת קלט יכולה להיראות בערך כך:

<קֶלֶט 
 סוג="אימייל"
 id="אימייל"
 שם="אימייל"
 מציין מיקום="[email protected]"
 [(ngModel)]="כתובת דוא"ל"
/>

בתוך ה .ts קובץ, ה כתובת דוא"ל המשתנה קשור לכתובת האימייל מהטופס.

כתובת אימייל: String = ''; 

כיצד להגדיר טופס דוגמה באפליקציה זוויתית

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

1. ליצור אפליקציית Angular חדשה.
2. הפעל את ng ליצור רכיב פקודה ליצירת רכיב חדש. כאן תשמור את הטופס.

   ng ליצור רכיב שם משתמש-בודק-טופס

3. החלף את כל הקוד שלך app.component.html קובץ עם התגים הבאים:

   <app-username-checker-form></app-username-checker-form>

4. הוסף את ה-CSS הבא לרכיב החדש שלך .css קובץ, הממוקם ב username-checker-form.component.css, כדי לעצב את הטופס:

   .מְכוֹלָה {
    תצוגה: flex;
    יישור טקסט: מרכז;
    להצדיק-תוכן: מרכז;
    align-items: center;
    גובה: 100Vh;
   }
   .כַּרְטִיס {
    רוחב: 50%;
    צבע רקע: peachpuff;
    border-radius: 1rem;
    ריפוד: 1rem;
   }
   קלט {
    גבול: 3פיקסלים מוצקים #1a659e;
    border-radius: 5px;
    גובה: 50 פיקסלים;
    גובה קו: רגיל;
    צֶבַע: #1a659e;
    בלוק תצוגה;
    רוחב: 100%;
    גודל קופסא: border-box;
    מִשׁתַמֵשׁ-בחר: אוטומטי;
    גודל גופן: 16px;
    ריפוד: 0 6px;
    padding-left: 12px;
   }
   קֶלֶט:מוֹקֵד {
    גבול: 3פיקסלים מוצקים #004e89;
   }
   .btn {
    בלוק תצוגה;
    מתאר: 0;
    סמן: מצביע;
    גבול: 2פיקסלים מוצקים #1a659e;
    border-radius: 3px;
    צֶבַע: #fff;
    רקע כללי: #1a659e;
    גודל גופן: 20px;
    משקל גופן: 600;
    גובה קו: 28px;
    ריפוד: 12px 20px;
    רוחב: 100%;
    שוליים-עליון: 1rem;
   }
   .btn:לְרַחֵף {
    רקע כללי: #004e89;
    גבול: #004e89;
   }
   .הַצלָחָה {
    צֶבַע: #14ae83;
   }
   .שְׁגִיאָה {
    צֶבַע: #fd536d;
   }

5. הוסף את ה-CSS הבא לתוך src/styles.css כדי להגדיר את צבעי משפחת הגופנים, הרקע והטקסט של האפליקציה הכוללת:

   @import url("https://fonts.googleapis.com/css2?family=Poppins: wght@300;400&תצוגה=החלפה");
   גוף {
    משפחת גופן: "פופינס";
    צבע רקע: papayawhip;
    צֶבַע: #1a659e;
   }

6. החלף את הקוד ב username-checker-form.component.html, כדי להוסיף את טופס בודק שם המשתמש:

   <div class="מְכוֹלָה">
   <div class="כַּרְטִיס">
   <h1> בודק שם משתמש </h1>
   <טופס>
   <קֶלֶט
    סוג="טֶקסט"
    id="שם משתמש"
    שם="שם משתמש"
    מציין מיקום="אנא הכנס שם משתמש"
    />
   <כפתור מחלקה="btn"> להציל </button>
   </form>
   </div>
   </div>

7. הפעל את האפליקציה שלך באמצעות הפקודה ng serve בטרמינל.

   לשרת

8. הצג את הבקשה שלך בכתובת http://localhost: 4200/.

שליחת נתונים בין קבצי HTML ו-TypeScript

השתמש בכריכה דו-כיוונית כדי לשלוח נתונים אל שלך .ts קובץ וחזרה ל .html קוֹבֶץ. זה אפשרי עם השימוש ב ngModel בטופס קֶלֶט תגים.

1. ייבא את FormsModule לתוך ה app.module.ts קובץ, והוסיפו אותו ל- יבוא מַעֲרָך:

   יְבוּא { FormsModule } מ '@angular/forms';
   @NgModule({
   //...
    יבוא: [
   // יבוא אחר
    FormsModule
    ],
   //...
   })

2. להצהיר על א שם משתמש משתנה מחלקה ב- .ts קוֹבֶץ, username-checker-form.component.ts:

   שם משתמש: string = '';

3. ב username-checker-form.component.html, הוסף [(ngModel)] עם ה שם משתמש משתנה בתג הקלט. זה מאפשר כריכה דו-כיוונית, וכל מה שמוקלד בקלט שם המשתמש של הטופס מוקצה למשתנה שם המשתמש ב- .ts קוֹבֶץ.

   <קֶלֶט
    סוג="טֶקסט"
    id="שם משתמש"
    שם="שם משתמש"
    מציין מיקום="אנא הכנס שם משתמש"
    [(ngModel)]="שם משתמש"
   />

4. כדי לבדוק את הנתונים האלה נשלחים אל .ts קובץ, צור א להציל() שיטה ב username-checker-form.component.ts. כאשר אתה שולח את הטופס, הבקשה תקרא לפונקציה זו.

   להציל(): בָּטֵל {
   לְנַחֵם.עֵץ(זֶה.שם משתמש);
   }

5. תוסיף את ה ngשלח הנחיה ל
   מתייג ב username-checker-form.component.html, וקוראים לשיטת save() .

   <טופס (ngSubmit)="להציל()">

6. בעת לחיצה על כפתור שמור, ה להציל() הפונקציה תדפיס את הערך שהוזן בשדה הקלט למסוף. אתה יכול להציג את המסוף בזמן ריצה באמצעות כלי המפתחים של הדפדפן. אם אינך מכיר את דפדפן DevTools או מציג את המסוף, תוכל ללמוד עוד על כיצד להשתמש ב-Chrome DevTools.
7. שלח את שם משתמש חזרה ל .html קוֹבֶץ. הוסף את משתנה שם המשתמש בין סוגריים מסולסלים ל- username-checker-form.component.html קובץ, לאחר ה
   תגים. השתמש בסוגריים מסולסלים כדי להציג את הערך המאוחסן במשתנה שם המשתמש.

   <h2 *ngIf="שם משתמש"> שם משתמש הוזן: {{ שם משתמש }} </h2>

   הטופס אמור להציג את הנתונים שהוזנו במקביל.
8. ב username-checker-form.component.ts, הוסף כמה משתני מחלקה כדי לבדוק אם שם המשתמש כבר קיים. להצהיר על א שמות משתמש מערך עם כמה שמות משתמש שנלקחו, והוסיפו א הוֹדָעָה מחרוזת המודיעה למשתמש על ההמחאה. המשתנה isValidUsername נכון אם שם המשתמש שהוזן אינו נמצא במערך שמות המשתמשים.

   שמות משתמש: string[] = [ 'בארט', 'ליסה', 'לטגן', 'לילה' ];
   הודעה: string = '';
   isValidUsername: בוליאני = שֶׁקֶר;

9. ה להציל() השיטה צריכה לבדוק אם שם המשתמש שהוזן כבר נמצא במערך שמות המשתמש הקיים או לא. בהתאם לתוצאה, ההודעה תוגדר בהתאם.

   להציל(): בָּטֵל {
    if (this.username != '') {
   זֶה.isValidUsername = !זֶה.usernames.includes(
   זֶה.שם משתמש.toLowerCase()
    );
   אם (זֶה.isValidUsername) {
   זֶה.message = 'שם המשתמש החדש שלך הוא'${זֶה.שם משתמש}'`;
    } אַחֵר {
   זֶה.message = 'שם המשתמש'${זֶה.שם משתמש}'כבר נלקח';
    }
    }
   }

10. תשלים את username-checker-form.component.html קובץ על ידי הצגת שם המשתמש שהוזן קיים או לא. הוסף הודעת שגיאה מתחת ל-

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

    <p *ngIf="שם משתמש" [ngClass]="הוא ValidUsername? 'הַצלָחָה': 'שְׁגִיאָה'">
     {{ הודעה }}
    </p>

11. בדפדפן שלך ב מארח מקומי: 4200, נסה להזין שם משתמש שקיים במערך שמות המשתמש: לאחר מכן, נסה להזין שם משתמש שלא.

שימוש בכריכה דו-כיוונית לשליחת נתונים בעת פיתוח אפליקציה

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

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

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