Mari kita bincangkan tentang cara mendapatkan data terlebih dahulu dalam Laluan Sudut

Bagaimana untuk mendapatkan data lebih awal dalam Laluan Sudut? Artikel berikut akan memperkenalkan kepada anda cara mendapatkan data terlebih dahulu dari Laluan Sudut Saya harap ia akan membantu anda!

Mendahului masa bermakna mendapatkan data sebelum ia dipersembahkan pada skrin. Dalam artikel ini, anda akan mempelajari cara mendapatkan data sebelum mengubah laluan. Melalui artikel ini, anda akan belajar menggunakan resolver, menggunakan Angular App di dalam resolver dan menggunakannya pada navigasi pramuat awam. [Cadangan tutorial berkaitan: "tutorial sudut"]

Mengapa anda perlu menggunakan Resolver

Resolver antara penghalaan dan komponen Memainkan peranan perkhidmatan middleware. Katakan anda mempunyai borang tanpa data dan anda ingin membentangkan borang kosong kepada pengguna, paparkan loader apabila data pengguna dimuatkan, dan kemudian apabila data dikembalikan, isikan borang dan sembunyikan loader.

Biasanya, kita akan mendapat data dalam ngOnInit() fungsi cangkuk komponen. Dalam erti kata lain, selepas komponen dimuatkan, kami memulakan permintaan data.

Untuk beroperasi dalam ngOnInit(), kita perlu menambah paparan loader dalam halaman penghalaannya selepas setiap komponen yang diperlukan dimuatkan. Resolver boleh memudahkan penambahan dan penggunaan loader. Daripada menambah loader dalam setiap laluan, anda hanya boleh menambah satu loader yang terpakai pada setiap laluan.

Artikel ini akan menggunakan contoh untuk menganalisis titik pengetahuan resolver. Supaya anda boleh mengingatinya dan menggunakannya dalam projek anda.

Menggunakan Resolver

Untuk menggunakan resolver dalam aplikasi anda, anda perlu menyediakan beberapa antara muka. Anda boleh mensimulasikannya melalui JSONPlaceholder tanpa membangunkannya sendiri.

JSONPlaceholder ialah sumber antara muka yang hebat Anda boleh menggunakannya untuk mempelajari konsep yang berkaitan dengan bahagian hadapan dengan lebih baik tanpa dikekang oleh antara muka.

Sekarang masalah antara muka telah diselesaikan, kita boleh memulakan resolver aplikasi. A resolver ialah perkhidmatan perisian tengah, jadi kami akan mencipta perkhidmatan.

$ ng g s resolvers/demo-resolver --skipTests=true

--skipTests=true Langkau menjana fail ujian Perkhidmatan dicipta dalam folder

src/app/resolvers. Terdapat kaedah resolver dalam antara muka resolve(), yang mengambil dua parameter: route (satu kejadian ActivatedRouteSnapshot) dan state (satu kejadian RouterStateSnapshot).

loader Biasanya semua ngOnInit() permintaan ditulis dalam AJAX, tetapi logiknya akan dilaksanakan dalam resolver bukannya ngOnInit().

Seterusnya, cipta perkhidmatan untuk mendapatkan data senarai dalam JSONPlaceholder. Kemudian panggilnya di tengah-tengah resolver, dan kemudian konfigurasikan maklumat resolve dalam laluan (halaman akan menunggu) sehingga resolver diproses. Selepas resolver diproses, kita boleh mendapatkan data melalui penghalaan dan memaparkannya dalam komponen.

Buat perkhidmatan dan tulis logik untuk mendapatkan data senarai

$ ng g s services/posts --skipTests=true

Sekarang kami telah berjaya mencipta perkhidmatan, tiba masanya untuk menulis logik untuk AJAX permintaan. Penggunaan

model boleh membantu kami mengurangkan ralat.

$ ng g class models/post --skipTests=true

post.ts

export class Post {  id: number;
  title: string;
  body: string;
  userId: string;
}

model Bersedia, tiba masanya untuk mendapatkan data untuk siaran post.

post.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Post } from "../models/post";

@Injectable({
  providedIn: "root"
})
export class PostsService {
  constructor(private _http: HttpClient) {}

  getPostList() {
    let URL = "https://jsonplaceholder.typicode.com/posts";
    return this._http.get<Post[]>(URL);
  }
}

Kini, perkhidmatan ini boleh dipanggil pada bila-bila masa.

demo-resolver.service.ts

import { Injectable } from "@angular/core";
import {
  Resolve,
  ActivatedRouteSnapshot,
  RouterStateSnapshot
} from "@angular/router";
import { PostsService } from "../services/posts.service";

@Injectable({
  providedIn: "root"
})
export class DemoResolverService implements Resolve<any> {
  constructor(private _postsService: PostsService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this._postsService.getPostList();
  }
}

Data senarai siaran dikembalikan daripada resolver. Kini, anda memerlukan laluan untuk mengkonfigurasi resolver, mendapatkan data daripada laluan dan kemudian memaparkan data dalam komponen. Untuk melakukan lompatan penghalaan, kita perlu mencipta komponen.

$ ng g c components/post-list --skipTests=true

Untuk menjadikan laluan kelihatan, tambahkan app.component.ts di dalam router-outlet.

<router-outlet></router-outlet>

Kini, anda boleh mengkonfigurasi fail app-routing.module.ts. Coretan kod di bawah akan membantu anda memahami konfigurasi penghalaan resolver.

app-routing-module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { PostListComponent } from "./components/post-list/post-list.component";
import { DemoResolverService } from "./resolvers/demo-resolver.service";

const routes: Routes = [
  {
    path: "posts",
    component: PostListComponent,
    resolve: {
      posts: DemoResolverService
    }
  },
  {
    path: "",
    redirectTo: "posts",
    pathMatch: "full"
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

A resolve telah ditambahkan pada konfigurasi penghalaan, yang akan memulakan permintaan HTTP dan kemudian Apabila permintaan HTTP berjaya kembali, benarkan komponen untuk memulakan. Laluan akan mengumpulkan data yang dikembalikan oleh permintaan HTTP yang diperolehi.

Cara menggunakan navigasi pramuat

untuk menunjukkan kepada pengguna bahawa permintaan sedang dijalankan, kami menulis AppComponent awam dan ringkas dalam loader. Anda boleh menyesuaikannya mengikut keperluan.

app.component.html

  
Loading...

<router-outlet></router-outlet>

app.component.ts

import { Component } from "@angular/core";
import {
  Router,
  RouterEvent,
  NavigationStart,
  NavigationEnd
} from "@angular/router";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  isLoader: boolean;

  constructor(private _router: Router) {}

  ngOnInit() {
    this.routerEvents();
  }

  routerEvents() {
    this._router.events.subscribe((event: RouterEvent) => {
      switch (true) {
        case event instanceof NavigationStart: {
          this.isLoader = true;
          break;
        }
        case event instanceof NavigationEnd: {
          this.isLoader = false;
          break;
        }
      }
    });
  }
}

当导航开始，isLoader 值被赋予 true，页面中，你将看到下面的效果。

当 resolver 处理完之后，它将会被隐藏。

现在，是时候从路由中获取值并将其展示出来。

port-list.component.ts

import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import { Post } from "src/app/models/post";

@Component({
  selector: "app-post-list",
  templateUrl: "./post-list.component.html",
  styleUrls: ["./post-list.component.scss"]
})
export class PostListComponent implements OnInit {
  posts: Post[];

  constructor(private _route: ActivatedRoute) {
    this.posts = [];
  }

  ngOnInit() {
    this.posts = this._route.snapshot.data["posts"];
  }
}

如上所示，post 的值来自 ActivatedRoute 的快照信息 data。这值都可以获取，只要你在路由中配置了相同的信息。

我们在 HTML 进行如下渲染。

<div class="post-list grid-container">
  <div class="card" *ngFor="let post of posts">
    <div class="title"><b>{{post?.title}}</b></div>
    <div class="body">{{post.body}}</div>
  </div>
</div>

CSS 片段样式让其看起来更美观。

port-list.component.css

.grid-container {
  display: grid;
  grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
}
.card {
  margin: 10px;
  box-shadow: black 0 0 2px 0px;
  padding: 10px;
}

推荐使用 scss 预处理器编写样式

从路由中获取数据之后，它会被展示在 HTML 中。效果如下快照。

至此，你已经了解完怎么应用 resolver 在你的项目中了。

总结

结合用户体验设计，在 resolver 的加持下，你可以提升你应用的表现。了解更多，你可以戳官网。

本文是译文，采用的是意译的方式，其中加上个人的理解和注释，原文地址是：

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

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara mendapatkan data terlebih dahulu dalam Laluan Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!