إذا كنت تقوم بإنشاء تطبيق Angular بصفحات متعددة ، فستحتاج إلى استخدام التوجيه للتنقل بينها. يمكنك القيام بذلك عن طريق إنشاء قائمة من المسارات بمسار لكل صفحة في وحدة التوجيه.

يمكنك بعد ذلك التوجيه إلى صفحات أخرى داخل ملف HTML باستخدام علامة الربط. يمكنك أيضًا التوجيه إلى صفحات أخرى داخل ملف TypeScript ، باستخدام طريقة router.navigate ().

كيفية إنشاء صفحة جديدة في تطبيق Angular

أولاً ، قم بإنشاء تطبيق Angular جديد. يمكنك أيضًا استخدام واحدة موجودة. إذا لم تكن معتادًا على كيفية إنشاء تطبيق Angular جديد ، فيمكنك التعرف عليه مع الآخرين المفاهيم التمهيدية المستخدمة في Angular.

  1. قم بإنشاء مكون جديد في تطبيق Angular الخاص بك باستخدام نانوغرام إنشاء المكون يأمر:
    نانوغرام إنشاء الصفحة الرئيسية للمكون
  2. افتح ال src / app / home / home.component.html ملف ، واستبدال المحتوى الحالي بمحتوى جديد.
    <فئة div ="المحتوى">
    <h2> مسكن </h2>
    <ص>
     أنا مصور يقوم بتصوير حفلات الزفاف. تحقق من مشاريعي!
    </ ص>
    <فئة div ="بطاقة">
    <h4> جون & ايمي </h4>
    <ص> الجبال الزرقاء ، أستراليا </ ص>
    </div>
    <فئة div ="بطاقة">
    <h4> روس & راش </h4>
    <ص> حدائق هانتر فالي ، أستراليا </ ص>
    </div>
    </div>
    3. instagram viewer
  3. يسكن src / app / home / home.component.css ملف بنمط محتوى HTML.
    .المحتوى {
    ارتفاع خط: 2rem;
    حجم الخط: 1.2em;
    }
    .بطاقة {
    مربع الظل: 0 4مقصف 8مقصف 0 rgba(0, 0, 0, 0.2);
    العرض: 400مقصف;
    حشوة: 16مقصف;
    حافة: 24مقصف 0مقصف;
    لون الخلفية: دخان ابيض;
    خط العائلة: بلا الرقيق;
    }
  4. قم بإنشاء مكون آخر باستخدام ملف نانوغرام إنشاء المكون الأمر في المحطة. ستستخدم المكون الجديد كصفحة حول.
    نانوغرام إنشاء مكون حول
  5. افتح ال src / app / about / about.component.html ملف ، واستبدال المحتوى الحالي بمحتوى جديد.
    <فئة div ="المحتوى">
    <h2> عني </h2>
    <ص>
     أنا'م جون ، وأنا أحب التقاط الصور. لقد كنت ألتقط الصور منذ أكثر من 25 عامًا. قم بزيارتي على وسائل التواصل الاجتماعي الخاصة بي:
    </ ص>
    <أ href =""> فيسبوك </أ><ر>
    <أ href =""> ينكدين </أ><ر>
    <أ href =""> انستغرام </أ><ر>
    </div>
  6. يسكن src / app / about / about.component.css ملف بنمط محتوى HTML.
    .المحتوى {
    ارتفاع خط: 2rem;
    حجم الخط: 1.2em;
    }

كيفية التنقل بين الصفحتين

يمكنك استخدام التوجيه للتنقل من صفحة إلى أخرى. يمكنك تكوين هذا في ملف التوجيه. سيحتوي هذا المثال على ملف توجيه واحد للتطبيق بأكمله ، موجود في src / app / app-routing.module.ts.

  1. إذا لم يكن تطبيقك يحتوي بالفعل على ملف وحدة توجيه التطبيق ، فيمكنك إنشاء ملف باستخدام ملحق نانوغرام وحدة توليد يأمر. في سطر الأوامر أو المحطة الطرفية ، انتقل إلى المجلد الجذر للتطبيق وقم بتشغيل الأمر التالي:
    ng إنشاء توجيه تطبيقات الوحدة النمطية - تطبيق الوحدة - مسطح
  2. سيؤدي هذا إلى إنشاء ملف app-routing.module.ts في ملف src / التطبيق مجلد.
  3. في الجزء العلوي من الملف ، أضف عمليات استيراد إضافية للمكونين "الصفحة الرئيسية" و "حول". تأكد من أنك تقوم أيضًا باستيراد RouterModule و CommonModule ؛ في النهاية ، يجب أن تبدو بيانات الاستيراد كما يلي:
    يستورد {CommonModule} من "@ الزاوي / المشترك" ؛
    يستورد {المسارات ، RouterModule} من "@ الزاوي / جهاز التوجيه" ؛
    يستورد {HomeComponent} من "./home/home.component" ؛
    يستورد {AboutComponent} من "./about/about.component" ؛
  4. أسفل عمليات الاستيراد ، أضف مصفوفة مسارات جديدة لتخزين المسارات التي ستستخدمها عند التوجيه إلى كل صفحة.
    مقدار ثابت المسارات: الطرق = [
     { طريق: '', مكون: HomeComponent}،
     { طريق: 'حول'، مكون: AboutComponent}
    ];
  5. استبدل كتلة NgModule بما يلي ، والذي يضيف RouterModule إلى صفيف الواردات والصادرات.
    NgModule ({
     الإعلانات: [] ،
     الواردات: [
     CommonModule ،
     RouterModule.forRoot (المسارات)
     ],
     الصادرات: [RouterModule]
    })
  6. في ال src / app / app.component.html ملف ، قم بإزالة المحتوى الحالي ، وأضف علامة منفذ جهاز التوجيه.
    <فئة div ="وعاء">
    <منفذ جهاز التوجيه></router-outlet>
    </div>

كيفية الانتقال إلى الصفحة الجديدة في ملف HTML

للتنقل إلى صفحة داخل ملف HTML ، استخدم علامة الارتساء. في سمة href ، أضف المسار الذي حددته في مصفوفة المسارات.

  1. في ال src / app / app.component.html ملف ، أضف علامتي ربط قبل مقطع الحاوية. سيسمح لك ذلك بالتنقل بين الصفحة الرئيسية وصفحات حول.
    <فئة div ="نافبار">
    <فئة ="حلقة الوصل" href ="">مسكن</أ>
    <فئة ="حلقة الوصل" href ="/about">حول</أ>
    </div>
  2. أضف بعض التصميم إلى src / app / app.component.css ملف.
    .وعاء {
    حافة: 48مقصف 35%;
    خط العائلة: &مثل;اريال&مثل;, بلا الرقيق;
    عرض: ثني;
    الاتجاه المرن: عمودي;
    محاذاة العناصر: المركز;
    }
    .navbar {
    لون الخلفية: darkslategray;
    حشوة: 30مقصف 50مقصف;
    عرض: ثني;
    محاذاة العناصر: المركز;
    خط العائلة: بلا الرقيق;
    }
    

    .حلقة الوصل: الأول من نوعه {
    الهامش الأيمن: 32مقصف;
    }
    .حلقة الوصل {
    اللون: أبيض;
    زخرفة النص: لا أحد;
    حجم الخط: 14نقطة;
    وزن الخط: بالخط العريض;
    }
  3. أضف بعض الأنماط إلى هامش الصفحة الإجمالي بتنسيق src / styles.css.
    هيئة {
    حافة: 0;
    حشوة: 0;
    }
  4. في موجه الأوامر أو المحطة الطرفية ، انتقل إلى المجلد الجذر لتطبيق Angular. قم بتشغيل التطبيق باستخدام ملف يخدم ng الأمر ، وانتظر حتى ينتهي التجميع.
    يخدم ng
  5. في المستعرض ، اكتب localhostURL في شريط URL لعرض التطبيق الخاص بك. بشكل افتراضي ، هذا هو عادة http://localhost: 4200/.
  6. سيتم تحميل موقع الويب الخاص بك على الصفحة الرئيسية.
  7. يمكنك الانتقال إلى صفحة "حول" بالنقر فوق الارتباط "حول" في شريط التنقل.

كيفية الانتقال إلى الصفحة الجديدة في ملف TypeScript

حتى الآن ، يستخدم هذا العرض التوضيحي روابط HTML قياسية لتوفير التنقل. للتنقل باستخدام ملف TypeScript بدلاً من ملف HTML ، يمكنك استخدام router.navigate ().

  1. في ال src / app / app.component.html ملف ، قم بإزالة علامات الربط واستبدالها بعلامات الأزرار. سيكون لهذه الأزرار حدث نقرة يؤدي إلى تشغيل وظيفة تسمى clickButton (). عند استدعاء دالة clickButton () ، أضف مسار مسار URL كوسيطة.
    <فئة الزر ="حلقة الوصل" (انقر) ="اضغط على الزر('')">مسكن</button>
    <فئة الزر ="حلقة الوصل" (انقر) ="اضغط على الزر('/about')">حول</button>
  2. أضف بعض التصميم إلى الأزرار الموجودة في ملف src / app / app.component.css ملف.
    زر {
    لون الخلفية: أسود;
    حشوة: 4مقصف 8مقصف;
    المؤشر: المؤشر;
    }
  3. في الجزء العلوي من src / app / app.component.ts ملف ، قم باستيراد جهاز التوجيه.
    يستورد {جهاز التوجيه} من "@ الزاوي / جهاز التوجيه" ؛
  4. أضف مُنشئًا جديدًا داخل فئة AppComponent ، وقم بحقن جهاز التوجيه داخل المعلمات.
    البناء(جهاز التوجيه الخاص: جهاز التوجيه) {
    }
  5. أسفل المُنشئ ، قم بإنشاء وظيفة جديدة تسمى clickButton () ، والتي ستنتقل إلى الصفحة الجديدة بناءً على عنوان URL الذي تمرره.
    clickButton (المسار: سلسلة) {
    هذه.router.navigate ([مسار]) ؛
    }
    ​​​​​​
  6. أعد تشغيل الأمر ng serve في موجه الأوامر أو المحطة الطرفية.
    يخدم ng
  7. انتقل إلى موقع الويب الخاص بك في متصفح. يتم الآن استبدال href بزرين.
  8. اضغط على حول زر. سيتم توجيهه إلى صفحة "حول".

إنشاء صفحات متعددة في تطبيق Angular

يمكنك التوجيه بين صفحات متعددة داخل تطبيق Angular باستخدام التوجيه. إذا كانت لديك مكونات منفصلة لكل صفحة ، فيمكنك تكوين مسارات لمساراتك داخل وحدة التوجيه.

للتنقل إلى صفحة أخرى عبر ملف HTML ، استخدم علامة ربط مع السمة href كمسار التوجيه إلى تلك الصفحة. للتنقل إلى صفحة أخرى عبر ملف TypeScript ، يمكنك استخدام طريقة router.navigate ().

إذا كنت تقوم ببناء تطبيق Angular ، فيمكنك استخدام توجيهات Angular. تسمح لك هذه باستخدام عبارات if الديناميكية ، أو for-loops ، أو غيرها من العمليات المنطقية داخل ملف HTML الخاص بالمكون.