เรามาพูดถึงวิธีรับข้อมูลล่วงหน้าใน Angular Route กันดีกว่า

การดึงข้อมูลล่วงหน้า หมายถึงการได้รับข้อมูลก่อนที่จะแสดงบนหน้าจอ ในบทความนี้ คุณจะได้เรียนรู้วิธีรับข้อมูลก่อนการเปลี่ยนแปลงเส้นทาง ในบทความนี้ คุณจะได้เรียนรู้การใช้ resolver ใช้ resolver ใน Angular App และนำไปใช้กับการนำทางที่โหลดไว้ล่วงหน้าทั่วไป [คำแนะนำการสอนที่เกี่ยวข้อง: "บทช่วยสอนเชิงมุม"]

ทำไมคุณควรใช้ Resolver

Resolver มีบทบาทเป็นบริการมิดเดิลแวร์ระหว่างการกำหนดเส้นทางและส่วนประกอบ สมมติว่าคุณมีแบบฟอร์มที่ไม่มีข้อมูล และคุณต้องการนำเสนอแบบฟอร์มว่างให้กับผู้ใช้ แสดง loader ในขณะที่โหลดข้อมูลผู้ใช้ จากนั้นเมื่อข้อมูลถูกส่งกลับ ให้เติมแบบฟอร์มและซ่อน loader

โดยปกติแล้ว เราได้รับข้อมูลในฟังก์ชัน hook ngOnInit() ของส่วนประกอบ กล่าวอีกนัยหนึ่ง หลังจากโหลดส่วนประกอบแล้ว เราจะเริ่มการร้องขอข้อมูล

การทำงานใน ngOnInit() เราจำเป็นต้องเพิ่ม loader display ลงในหน้าการกำหนดเส้นทางหลังจากโหลดส่วนประกอบที่จำเป็นแต่ละรายการแล้ว Resolver สามารถทำให้การเพิ่มและการใช้ loader ง่ายขึ้น แทนที่จะเพิ่ม loader ให้กับทุกเส้นทาง คุณสามารถเพิ่ม loader ได้หนึ่งตัวสำหรับแต่ละเส้นทาง

บทความนี้จะใช้ตัวอย่างเพื่อวิเคราะห์จุดความรู้ของ resolver เพื่อให้คุณสามารถจดจำและนำไปใช้ในโครงการของคุณได้

การใช้ Resolver ในแอปพลิเคชัน

เพื่อที่จะใช้ resolver ในแอปพลิเคชัน คุณต้องเตรียมอินเทอร์เฟซบางอย่าง คุณสามารถจำลองมันผ่าน JSONPlaceholder โดยไม่ต้องพัฒนามันเอง

JSONPlaceholder เป็นทรัพยากรอินเทอร์เฟซที่ยอดเยี่ยม คุณสามารถใช้เพื่อเรียนรู้แนวคิดที่เกี่ยวข้องของส่วนหน้าได้ดีขึ้น โดยไม่ถูกจำกัดโดยอินเทอร์เฟซ

ตอนนี้ปัญหาอินเทอร์เฟซได้รับการแก้ไขแล้ว เราก็สามารถเริ่มแอปพลิเคชัน resolver resolver คือบริการมิดเดิลแวร์ ดังนั้นเราจะสร้างบริการขึ้นมา

$ ng gs solvers/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 class models/post --skipTests=true

post.ts

คลาสส่งออกโพสต์ { id: number;
  ชื่อเรื่อง: สตริง;
  ร่างกาย: เชือก;
  รหัสผู้ใช้: สตริง;
}

model พร้อมแล้ว ถึงเวลารับข้อมูลของ post

post.service.ts

นำเข้า { ฉีดได้ } จาก "@เชิงมุม/แกน";
นำเข้า { HttpClient } จาก "@เชิงมุม/ทั่วไป/http";
นำเข้า { โพสต์ } จาก "../models/post";

@ฉีด({
  ให้ไว้ใน: "ราก"
-
ส่งออกคลาส PostService {
  ตัวสร้าง (ส่วนตัว _http: HttpClient) {}

  getPostList() {
    ให้ URL = "https://jsonplaceholder.typicode.com/posts";
    กลับ this._http.get<โพสต์[]>(URL);
  -
}

ขณะนี้ คุณสามารถเรียกใช้บริการนี้ได้ตลอดเวลา

demo-resolver.service.ts

นำเข้า { ฉีดได้ } จาก "@เชิงมุม/แกน";
นำเข้า {
  แก้ไข
  เปิดใช้งานRouteSnapshot,
  RouterStateSnapshot
} จาก "@เชิงมุม/เราเตอร์";
นำเข้า { PostService } จาก "../services/posts.service";

@ฉีด({
  ให้ไว้ใน: "ราก"
-
ส่งออกคลาส DemoResolverService ดำเนินการแก้ไข <ใด ๆ> {
  ตัวสร้าง (ส่วนตัว _postsService: PostService) {}

  แก้ไข (เส้นทาง: ActivatedRouteSnapshot สถานะ: RouterStateSnapshot) {
    ส่งคืนสิ่งนี้._postsService.getPostList();
  -
}

ข้อมูลรายการโพสต์ที่ส่งคืนจาก resolver ตอนนี้ คุณต้องมีเส้นทางเพื่อกำหนดค่า resolver รับข้อมูลจากเส้นทาง จากนั้นแสดงข้อมูลในส่วนประกอบ เพื่อทำการข้ามการกำหนดเส้นทาง เราจำเป็นต้องสร้างส่วนประกอบ

$ ng gcส่วนประกอบ/post-list --skipTests=true

หากต้องการให้เส้นทางมองเห็นได้ ให้เพิ่ม router-outlet ใน app.component.ts

<router-outlet></router-outlet>

ตอนนี้คุณสามารถกำหนดค่าไฟล์ app-routing.module.ts ได้แล้ว ข้อมูลโค้ดต่อไปนี้จะช่วยให้คุณเข้าใจ resolver การกำหนดค่าเส้นทาง

app-routing-module.ts

นำเข้า { NgModule } จาก "@เชิงมุม/core";
นำเข้า { เส้นทาง, RouterModule } จาก "@เชิงมุม/เราเตอร์";
นำเข้า { PostListComponent } จาก "./components/post-list/post-list.component";
นำเข้า { DemoResolverService } จาก "./resolvers/demo-resolver.service";

เส้นทาง const: เส้นทาง = [
  -
    เส้นทาง: "โพสต์"
    ส่วนประกอบ: PostListComponent,
    แก้ไข: {
      โพสต์: DemoResolverService
    -
  -
  -
    เส้นทาง: "",
    เปลี่ยนเส้นทางไปที่: "โพสต์",
    pathMatch: "เต็ม"
  -
-

@NgModule({
  การนำเข้า: [RouterModule.forRoot(เส้นทาง)],
  ส่งออก: [โมดูลเราเตอร์]
-
ส่งออกคลาส 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

นำเข้า { ส่วนประกอบ } จาก "@เชิงมุม/core";
นำเข้า {
  เราเตอร์,
  เหตุการณ์เราเตอร์,
  การนำทางเริ่ม
  การนำทางสิ้นสุด
} จาก "@เชิงมุม/เราเตอร์";

@ส่วนประกอบ({
  ตัวเลือก: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
-
ส่งออกคลาส AppComponent {
  isLoader: บูลีน;

  ตัวสร้าง (ส่วนตัว _router: เราเตอร์) {}

  ngOnInit() {
    this.routerEvents ();
  -

  เหตุการณ์เราเตอร์ () {
    this._router.events.subscribe ((เหตุการณ์: RouterEvent) => {
      สวิตช์ (จริง) {
        กรณีเหตุการณ์อินสแตนซ์ของ NavigationStart: {
          this.isLoader = จริง;
          หยุดพัก;
        -
        กรณีเหตุการณ์อินสแตนซ์ของการนำทางสิ้นสุด: {
          this.isLoader = เท็จ;
          หยุดพัก;
        -
      -
    -
  -
}

เมื่อการนำทางเริ่มต้นขึ้น ค่า isLoader จะถูกกำหนดให้ true และคุณจะเห็นเอฟเฟกต์ต่อไปนี้บนเพจ

เมื่อ resolver เสร็จสิ้นการประมวลผล มันจะถูกซ่อนไว้

ตอนนี้ถึงเวลารับค่าจากเส้นทางแล้วแสดง

port-list.component.ts

นำเข้า { ส่วนประกอบ OnInit } จาก "@เชิงมุม/core";
นำเข้า { เราเตอร์, ActivatedRoute } จาก "@เชิงมุม/เราเตอร์";
นำเข้า { โพสต์ } จาก "src/app/models/post";

@ส่วนประกอบ({
  ตัวเลือก: "แอปโพสต์รายการ",
  templateUrl: "./post-list.component.html",
  styleUrls: ["./post-list.component.scss"]
-
คลาสส่งออก PostListComponent ใช้ OnInit {
  โพสต์: โพสต์[];

  ตัวสร้าง (ส่วนตัว _route: ActivatedRoute) {
    this.posts = [];
  -

  ngOnInit() {
    this.posts = this._route.snapshot.data["โพสต์"];
  -
}

ดังที่แสดงไว้ข้างต้น ค่าของ post มาจาก data สแน็ปช็อตของ ActivatedRoute สามารถรับค่าทั้งสองนี้ได้ตราบใดที่คุณกำหนดค่าข้อมูลเดียวกันในเส้นทาง

เราแสดงผลดังนี้ใน HTML

<div class="โพสต์รายการตารางคอนเทนเนอร์">
  <div class="card" *ngFor="ให้โพสต์โพสต์">
    <div class="title"><b>{{โพสต์?.title}}</b></div>
    <div class="body">{{post.body}}</div>
  </div>
</div>

รูปแบบแฟรกเมนต์ CSS ทำให้ดูสวยงามยิ่งขึ้น

พอร์ต-list.component.css

.grid-container {
  จอแสดงผล: ตาราง;
  ตารางเทมเพลตคอลัมน์: คำนวณ (100% / 3) คำนวณ (100% / 3) คำนวณ (100% / 3);
-
.การ์ด {
  ระยะขอบ: 10px;
  กล่องเงา: สีดำ 0 0 2px 0px;
  ช่องว่างภายใน: 10px;
}

ขอแนะนำให้ใช้ตัวประมวลผลล่วงหน้า scss เพื่อเขียนสไตล์

หลังจากได้รับข้อมูลจากเส้นทางแล้ว มันจะถูกแสดงใน HTML เอฟเฟกต์จะเป็นดังนี้: สแนปช็อต

ณ จุดนี้ คุณได้เรียนรู้วิธีใช้ resolver ในโครงการของคุณแล้ว

สรุป

เมื่อรวมกับการออกแบบประสบการณ์ผู้ใช้ และด้วยความช่วยเหลือของ resolver คุณสามารถปรับปรุงประสิทธิภาพของแอปพลิเคชันของคุณได้ หากต้องการเรียนรู้เพิ่มเติม คุณสามารถเยี่ยมชมเว็บไซต์อย่างเป็นทางการ

บทความนี้เป็นการแปลโดยใช้การแปลฟรีพร้อมความเข้าใจส่วนตัวและเพิ่มความคิดเห็น ที่อยู่เดิมคือ:

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