لنتحدث عن كيفية الحصول على البيانات مسبقًا في Angular Route

الجلب المسبق يعني الحصول على البيانات قبل عرضها على الشاشة. ستتعلم في هذه المقالة كيفية الحصول على البيانات قبل إجراء تغييرات التوجيه. من خلال هذه المقالة، ستتعلم كيفية استخدام resolver ، وتطبيق resolver في Angular App ، وتطبيقها على التنقل الشائع المحمل مسبقًا. [توصية تعليمية ذات صلة: "البرنامج التعليمي الزاوي"]

لماذا يجب عليك استخدام Resolver

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

عادة، نحصل على البيانات في وظيفة ربط ngOnInit() الخاصة بالمكون. بمعنى آخر، بعد تحميل المكون، نبدأ طلب بيانات.

عند التشغيل في ngOnInit() ، نحتاج إلى إضافة عرض loader إلى صفحة التوجيه الخاصة به بعد تحميل كل مكون مطلوب. يمكن Resolver تبسيط عملية إضافة واستخدام loader . بدلاً من إضافة loader إلى كل مسار، يمكنك فقط إضافة loader واحدة لكل مسار.

ستستخدم هذه المقالة أمثلة لتحليل نقاط المعرفة الخاصة resolver . حتى تتمكن من تذكرها واستخدامها في مشاريعك.

استخدام Resolver في التطبيقات

لاستخدام resolver في التطبيقات، تحتاج إلى إعداد بعض الواجهات. يمكنك محاكاته من خلال JSONPlaceholder دون تطويره بنفسك.

يعد JSONPlaceholder موردًا رائعًا للواجهة، ويمكنك استخدامه لتعلم المفاهيم ذات الصلة بالواجهة الأمامية بشكل أفضل دون التقيد بالواجهة.

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

$ ng gs Resolvers/demo-resolver --skipTests=true

--skipTests=true يتخطى

إنشاء ملفات src/app/resolvers . توجد طريقة resolve() ‎ في واجهة resolver ، والتي تحتوي على معلمتين: route (مثيل لـ ActivatedRouteSnapshot ) state (مثيل لـ RouterStateSnapshot ).

عادةً ما يكتب loader جميع طلبات AJAX في ngOnInit() ، ولكن سيتم تنفيذ المنطق في resolver بدلاً من ngOnInit() .

بعد ذلك، قم بإنشاء خدمة للحصول على بيانات القائمة في JSONPlaceholder . ثم اتصل به في resolver ، ثم قم بتكوين معلومات resolve في المسار (ستنتظر الصفحة) حتى تتم معالجة resolver . بعد معالجة resolver ، يمكننا الحصول على البيانات من خلال التوجيه وعرضها في المكون.

أنشئ الخدمة واكتب المنطق للحصول على بيانات القائمة

$ ng gs Services/posts --skipTests=true

الآن بعد أن أنشأنا الخدمة بنجاح، حان الوقت لكتابة المنطق لطلب AJAX .

يمكن أن يساعدنا استخدام model في تقليل الأخطاء.

$ ng g classmodels/post --skipTests=true

post.ts

فئة التصدير Post { id: number;
  العنوان: سلسلة؛
  الجسم: سلسلة؛
  معرف المستخدم: سلسلة؛
}

model جاهز، حان وقت الحصول على بيانات post .

post.service.ts

import {Injectable} من "@angular/core";
استيراد {HttpClient} من "@angular/common/http";
استيراد {منشور} من "../models/post";

@الحقن({
  المقدمة في: "الجذر"
})
فئة التصدير PostService {
  منشئ (خاص _http: HttpClient) {}

  الحصول على بوستليست () {
    Let URL = "https://jsonplaceholder.typicode.com/posts";
    إرجاع هذا._http.get<Post[]>(URL);
  }
}

الآن، يمكن استدعاء هذه الخدمة في أي وقت.

demo-resolver.service.ts

import { Injectable } من "@angular/core";
يستورد {
  حل،
  لقطة الطريق المنشط،
  RouterStateSnapshot
} من "@angular/router";
استيراد { PostsService } من "../services/posts.service"؛

@الحقن({
  المقدمة في: "الجذر"
})
فئة التصدير DemoResolverService تنفذ Resolve<any> {
  منشئ (خدمة _postsService: PostsService) {}

  حل (الطريق: ActivatedRouteSnapshot، الحالة: RouterStateSnapshot) {
    إرجاع this._postsService.getPostList();
  }
}

تم إرجاع بيانات قائمة النشر من resolver . الآن، أنت بحاجة إلى مسار لتكوين resolver ، والحصول على البيانات من المسار، ثم عرض البيانات في المكون. من أجل تنفيذ قفزات التوجيه، نحتاج إلى إنشاء مكون.

$ ng gc Components/post-list --skipTests=true

لجعل المسار مرئيًا، قم بإضافة router-outlet في app.component.ts .

<router-outlet></router-outlet>

الآن، يمكنك تكوين ملف app-routing.module.ts . سيساعدك مقتطف التعليمات البرمجية التالي على فهم resolver تكوين المسار.

app-routing-module.ts

import { NgModule } من "@angular/core";
استيراد {الطرق، RouterModule} من "@angular/router"؛
استيراد { PostListComponent } من "./components/post-list/post-list.component"؛
استيراد { DemoResolverService } من "./resolvers/demo-resolver.service"؛

طرق ثابتة: طرق = [
  {
    المسار: "المشاركات"،
    المكون: PostListComponent،
    الحل: {
      المشاركات: DemoResolverService
    }
  },
  {
    طريق: ""،
    إعادة التوجيه إلى: "المشاركات"،
    pathMatch: "كامل"
  }
];

@NgModule({
  الواردات: [RouterModule.forRoot(routes)]،
  الصادرات: [وحدة التوجيه]
})
فئة التصدير AppRoutingModule {}

تمت إضافة resolve إلى تكوين التوجيه، والذي سيبدأ طلب HTTP ثم يسمح للمكون بالتهيئة عندما يعود طلب HTTP بنجاح. سيقوم المسار بتجميع البيانات التي يتم إرجاعها بواسطة طلب HTTP .

كيفية استخدام التنقل المحمل مسبقًا

لإظهار المستخدم أن الطلب قيد التقدم، نكتب loader عامًا وبسيطًا في AppComponent . يمكنك تخصيصه حسب الحاجة.

app.component.html

<div class="loader" *ngIf="isLoader">
  <div>جارٍ التحميل...</div>
</div>
<router-outlet></router-outlet>

app.component.ts

import { Component } from "@angular/core";
يستورد {
  راوتر,
  حدث الراوتر,
  بداية التنقل,
  نهاية الملاحة
} من "@angular/router";

@عنصر({
  المحدد: "جذر التطبيق"،
  templateUrl: "./app.component.html"،
  styleUrls: ["./app.component.scss"]
})
فئة التصدير AppComponent {
  isLoader: منطقي؛

  منشئ (جهاز التوجيه الخاص: جهاز التوجيه) {}

  نجونينيت () {
    this.routerEvents();
  }

  أحداث التوجيه () {
    this._router.events.subscribe((الحدث: RouterEvent) => {
      التبديل (صحيح) {
        مثيل حدث الحالة لـ NavigationStart: {
          this.isLoader = true;
          استراحة؛
        }
        مثيل حدث الحالة لـ NavigationEnd: {
          this.isLoader = false;
          استراحة؛
        }
      }
    });
  }
}

عندما يبدأ التنقل، يتم تعيين قيمة isLoader true ، وسترى التأثير التالي على الصفحة.

عند الانتهاء من معالجة resolver ، سيتم إخفاؤه.

حان الوقت الآن للحصول على القيمة من المسار وعرضها.

port-list.component.ts

import { Component, OnInit } من "@angular/core";
استيراد {جهاز التوجيه، ActivatedRoute} من "@angular/router"؛
استيراد { منشور } من "src/app/models/post";

@عنصر({
  المحدد: "قائمة ما بعد التطبيق"،
  templateUrl: "./post-list.component.html"،
  styleUrls: ["./post-list.component.scss"]
})
فئة التصدير PostListComponent تنفذ OnInit {
  المشاركات: مشاركة[];

  منشئ (طريق _ خاص: ActivatedRoute) {
    this.posts = [];
  }

  نجونينيت () {
    this.posts = this._route.snapshot.data["posts"];
  }
}

كما هو موضح أعلاه، تأتي قيمة post من data معلومات اللقطة الخاصة بـ ActivatedRoute . يمكن الحصول على هاتين القيمتين طالما قمت بتكوين نفس المعلومات في المسار.

نعرض كما يلي في HTML .

<div class="حاوية شبكة ما بعد القائمة">
  <div class="card" *ngFor="السماح بنشر المشاركات">
    <div class="title"><b>{{post?.title}}</b></div>
    <div class="body">{{post.body}}</div>
  </div>
</div>

أنماط أجزاء CSS تجعلها تبدو أكثر جمالاً.

port-list.component.css

.grid-container {
  العرض: الشبكة؛
  أعمدة قالب الشبكة: calc(100% / 3) calc(100% / 3) calc(100% / 3);
}
.بطاقة {
  الهامش: 10 بكسل؛
  صندوق الظل: أسود 0 0 2px 0px؛
  الحشو: 10 بكسل؛
}

يوصى باستخدام معالج scss لكتابة الأنماط

بعد الحصول على البيانات من المسار، سيتم عرضها بتنسيق HTML . التأثير كما يلي: لقطة.

في هذه المرحلة، تعلمت كيفية استخدام resolver في مشروعك.

ملخص:

بالاشتراك مع تصميم تجربة المستخدم وبمساعدة resolver ، يمكنك تحسين أداء التطبيق الخاص بك. لمعرفة المزيد، يمكنك زيارة الموقع الرسمي.

هذه المقالة مترجمة، باستخدام ترجمة مجانية، مع إضافة فهم شخصي وتعليقات. العنوان الأصلي هو:

https://www.pluralsight.com/guides/prefetching-data-for-an-angular-route.