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

לאחר מכן תוכל לנתב לדפים אחרים בתוך קובץ HTML באמצעות תג עוגן. אתה יכול גם לנתב לדפים אחרים בתוך קובץ TypeScript, באמצעות שיטת router.navigate()‎.

כיצד ליצור דף חדש באפליקציה זוויתית

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

  1. צור רכיב חדש באפליקציית Angular שלך משתמש ב ng ליצור רכיב פקודה:
    ng ליצור רכיב הביתה
  2. פתח את ה src/app/home/home.component.html קובץ, והחלפת התוכן הנוכחי בתוכן חדש.
    <div class="תוֹכֶן">
    <h2> בית </h2>
    <ע>
     אני צלם שעושה צילומי חתונות. בדוק את הפרויקטים שלי!
    </p>
    <div class="כַּרְטִיס">
    <h4> ג'ון & איימי </h4>
    <ע> הרים כחולים, אוסטרליה </p>
    </div>
    <div class="כַּרְטִיס">
    <h4> רוס & רח </h4>
    <ע> גני האנטר ואלי, אוסטרליה </p>
    </div>
    </div>
  3. לאכלס את src/app/home/home.component.css קובץ עם סגנון עבור תוכן ה-HTML.
    instagram viewer 
    .תוֹכֶן {
    גובה קו: 2rem;
    גודל גופן: 1.2em;
    }
    .כַּרְטִיס {
    צל קופסא: 0 4פיקסלים 8פיקסלים 0 rgba(0, 0, 0, 0.2);
    רוֹחַב: 400פיקסלים;
    ריפוד: 16פיקסלים;
    שולים: 24פיקסלים 0פיקסלים;
    צבע רקע: עשן לבן;
    משפחת גופן: פונט סאנס סריף;
    }
  4. צור רכיב נוסף באמצעות ה ng ליצור רכיב פקודה בטרמינל. אתה תשתמש ברכיב החדש בתור דף אודות.
    ng ליצור רכיב על
  5. פתח את ה src/app/about/about.component.html קובץ, והחלפת התוכן הנוכחי בתוכן חדש.
    <div class="תוֹכֶן">
    <h2> עליי </h2>
    <ע>
     אני'ג'ון, ואני אוהבים לצלם. אני מצלם למעלה מ-25 שנה. בקרו אותי ברשתות החברתיות שלי:
    </p>
    <a href=""> פייסבוק </א><br>
    <a href=""> לינקדאין </א><br>
    <a href=""> אינסטגרם </א><br>
    </div>
  6. לאכלס את src/app/about/about.component.css קובץ עם סגנון עבור תוכן ה-HTML.
    .תוֹכֶן {
    גובה קו: 2rem;
    גודל גופן: 1.2em;
    }

כיצד לנווט בין שני הדפים

אתה יכול להשתמש בניתוב כדי לנווט מדף אחד לאחר. אתה יכול להגדיר זאת בקובץ ניתוב. בדוגמה זו יהיה קובץ ניתוב אחד עבור האפליקציה כולה, הממוקם ב src/app/app-routing.module.ts.

  1. אם לאפליקציה שלך אין כבר את קובץ מודול ניתוב האפליקציה, אתה יכול ליצור אחד באמצעות ng ליצור מודול פקודה. בשורת פקודה או במסוף, נווט אל תיקיית השורש של היישום והפעל את הפקודה הבאה:
    ng ליצור מודול app-routing --module app --שטוח
  2. פעולה זו תיצור קובץ app-routing.module.ts בקובץ שלך src/app תיקייה.
  3. בחלק העליון של הקובץ, הוסף ייבוא ​​נוסף עבור רכיבי הבית והאודות. ודא שאתה מייבא גם RouterModule ו-CommonModule; בסופו של דבר, הצהרות הייבוא ​​שלך אמורות להיראות כך:
    יְבוּא { CommonModule } מ '@angular/common';
    יְבוּא { מסלולים, RouterModule } מ '@angular/נתב';
    יְבוּא { HomeComponent } מ './home/home.component';
    יְבוּא { AboutComponent } מ './about/about.component';
  4. מתחת לייבוא, הוסף מערך מסלולים חדש כדי לאחסן את הנתיבים שבהם תשתמש בעת הניתוב לכל עמוד.
    const מסלולים: מסלולים = [
     { נָתִיב: '', רְכִיב: HomeComponent },
     { נָתִיב: 'על אודות', רְכִיב: AboutComponent }
    ];
  5. החלף את בלוק NgModule עם הבא, אשר מוסיף את ה-RouterModule למערך הייבוא ​​והייצוא.
    @NgModule({
     הצהרות: [],
     יבוא: [
     CommonModule,
     RouterModule.forRoot (מסלולים)
     ],
     יצוא: [RouterModule]
    })
  6. בתוך ה src/app/app.component.html קובץ, הסר את התוכן הנוכחי והוסף את תג הנתב-outlet.
    <div class="מְכוֹלָה">
    <שקע נתב></router-outlet>
    </div>

כיצד לנווט לדף החדש בקובץ HTML

כדי לנווט לדף בתוך קובץ HTML, השתמש בתג העוגן. בתכונת href, הוסף את הנתיב שציינת במערך המסלולים.

  1. בתוך ה src/app/app.component.html קובץ, הוסף שני תגי עוגן לפני ה-container div. זה יאפשר לך לנווט בין דפי הבית והאודות.
    <div class="navbar">
    <כיתה="קישור" href="">בית</א>
    <כיתה="קישור" href="/about">על אודות</א>
    </div>
  2. הוסף קצת סטיילינג ל src/app/app.component.css קוֹבֶץ.
    .מְכוֹלָה {
    שולים: 48פיקסלים 35%;
    משפחת גופן: &quot;אריאל&quot;, פונט סאנס סריף;
    לְהַצִיג: לְהַגמִישׁ;
    כיוון הגמיש: טור;
    align-items: מֶרְכָּז;
    }
    .navbar {
    צבע רקע: darkslateray;
    ריפוד: 30פיקסלים 50פיקסלים;
    לְהַצִיג: לְהַגמִישׁ;
    align-items: מֶרְכָּז;
    משפחת גופן: פונט סאנס סריף;
    }
    

    .קישור:ראשון מהסוג {
    שוליים-ימין: 32פיקסלים;
    }
    .קישור {
    צֶבַע: לבן;
    טקסט-קישוט: אף אחד;
    גודל גופן: 14pt;
    משקל גופן: נוֹעָז;
    }
  3. הוסף קצת סגנון לשולי העמוד הכוללים ב src/styles.css.
    גוּף {
    שולים: 0;
    ריפוד: 0;
    }
  4. בשורת פקודה או במסוף, נווט אל תיקיית השורש של יישום Angular. הפעל את היישום באמצעות ה לשרת הפקודה, והמתן עד שהיא תסיים את ההידור.
    לשרת
  5. בדפדפן, הקלד את localhostURL בשורת ה-URL כדי להציג את היישום שלך. כברירת מחדל, זה בדרך כלל http://localhost: 4200/.
  6. האתר שלך ייטען לדף הבית.
  7. תוכל לנווט לדף אודות על ידי לחיצה על הקישור אודות בסרגל הניווט.

כיצד לנווט לדף החדש בקובץ TypeScript

עד כה, הדגמה זו משתמשת בקישורי HTML סטנדרטיים כדי לספק ניווט. כדי לנווט באמצעות קובץ TypeScript במקום קובץ HTML, אתה יכול להשתמש router.navigate().

  1. בתוך ה src/app/app.component.html קובץ, הסר את תגי העוגן והחליפו אותם בתגי כפתור. לחצנים אלו יהיה אירוע קליק שמפעיל פונקציה בשם clickButton(). כאשר אתה קורא לפונקציה clickButton(), הוסף את נתיב נתיב כתובת האתר כארגומנט.
    <כפתור מחלקה="קישור" (לחץ)="לחץ על כפתור('')">בית</button>
    <כפתור מחלקה="קישור" (לחץ)="לחץ על כפתור('/about')">על אודות</button>
  2. הוסף קצת סטיילינג לכפתורים ב- src/app/app.component.css קוֹבֶץ.
    לַחְצָן {
    צבע רקע: שָׁחוֹר;
    ריפוד: 4פיקסלים 8פיקסלים;
    סַמָן: מַצבִּיעַ;
    }
  3. בחלק העליון של src/app/app.component.ts קובץ, ייבא את הנתב.
    יְבוּא { נתב } מ '@angular/נתב';
  4. הוסף בנאי חדש בתוך המחלקה AppComponent, והזריק את הנתב בתוך הפרמטרים.
    בַּנַאִי(נתב פרטי: נתב) {
    }
  5. מתחת לבנאי, צור פונקציה חדשה בשם clickButton(), שתנווט לדף החדש על סמך כתובת האתר שאתה מעביר.
    clickButton (נתיב: מחרוזת) {
    זֶה.router.navigate([נתיב]);
    }
    ​​​​​​
  6. הפעל מחדש את הפקודה ng serve בשורת הפקודה או בטרמינל.
    לשרת
  7. נווט אל האתר שלך בדפדפן. ה-href מוחלף כעת בשני כפתורים.
  8. הקלק על ה על אודות לַחְצָן. זה ינותב לדף אודות.

יצירת דפים מרובים באפליקציה זוויתית

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

כדי לנווט לדף אחר באמצעות קובץ HTML, השתמש בתג עוגן עם תכונת href בתור נתיב הניתוב לדף זה. כדי לנווט לדף אחר באמצעות קובץ TypeScript, אתה יכול להשתמש בשיטת router.navigate() .

אם אתה בונה יישום Angular, אתה יכול להשתמש בהנחיות Angular. אלה מאפשרים לך להשתמש ב-if-statements דינמי, for-loops או פעולות לוגיות אחרות בתוך קובץ ה-HTML של רכיב.