Mengambil sebelumnya berarti mendapatkan data sebelum ditampilkan di layar. Dalam artikel ini, Anda akan mempelajari cara mendapatkan data sebelum perutean diubah. Melalui artikel ini, Anda akan belajar menggunakan resolver , menerapkan resolver di Angular App , dan menerapkannya pada navigasi umum yang dimuat sebelumnya. [Rekomendasi tutorial terkait: "tutorial sudut"]
ResolverResolver memainkan peran layanan middleware antara perutean dan komponen. Misalkan Anda memiliki formulir tanpa data, dan Anda ingin menyajikan formulir kosong kepada pengguna, menampilkan loader saat data pengguna dimuat, lalu saat data dikembalikan, isi formulir dan sembunyikan loader .
Biasanya, kita mendapatkan data dalam fungsi kait ngOnInit() komponen. Dengan kata lain, setelah komponen dimuat, kami memulai permintaan data.
Beroperasi di ngOnInit() , kita perlu menambahkan tampilan loader ke halaman peruteannya setelah setiap komponen yang diperlukan dimuat. Resolver dapat menyederhanakan penambahan dan penggunaan loader . Daripada menambahkan loader ke setiap rute, Anda cukup menambahkan satu loader untuk setiap rute.
Artikel ini akan menggunakan contoh untuk menganalisis poin pengetahuan dari resolver . Agar Anda dapat mengingatnya dan menggunakannya dalam proyek Anda.
Resolver pada AplikasiUntuk menggunakan resolver pada aplikasi, Anda perlu menyiapkan beberapa antarmuka. Anda dapat mensimulasikannya melalui JSONPlaceholder tanpa mengembangkannya sendiri.
JSONPlaceholder adalah sumber antarmuka yang bagus. Anda dapat menggunakannya untuk mempelajari konsep terkait front end dengan lebih baik tanpa dibatasi oleh antarmuka.
Sekarang masalah antarmuka telah terpecahkan, kita dapat memulai aplikasi resolver . resolver adalah layanan middleware, jadi kami akan membuat layanan.
$ ng gs Resolvers/demo-resolver --skipTests=true
--skipTests=true skip menghasilkan file pengujian
. Layanan dibuat di folder src/app/resolvers . Ada metode resolve() di antarmuka resolver , yang memiliki dua parameter: route (contoh ActivatedRouteSnapshot ) dan state (contoh RouterStateSnapshot ).
loader biasanya menulis semua permintaan AJAX di ngOnInit() , namun logikanya akan diimplementasikan di resolver bukan ngOnInit() .
Selanjutnya, buat layanan untuk mendapatkan data daftar di JSONPlaceholder . Kemudian panggil di resolver , lalu konfigurasikan informasi resolve di rute (halaman akan menunggu) hingga resolver diproses. Setelah resolver diproses, kita dapat memperoleh data melalui routing dan menampilkannya di komponen.
$ ng gs services/posts --skipTests=true
Sekarang kita telah berhasil membuat layanan, sekarang saatnya menulis logika untuk permintaan AJAX .
Penggunaan model dapat membantu kita mengurangi kesalahan.
$ ng g model kelas/posting --skipTests=true
post.ts
ekspor kelas Posting { id: nomor;
judul: tali;
tubuh: tali;
ID pengguna: string;
} model sudah siap, saatnya mengambil data post .
post.service.ts
import { Suntikan } dari "@angular/core";
impor { HttpClient } dari "@angular/common/http";
impor { Posting } dari "../models/post";
@Dapat disuntik({
disediakanDalam: "root"
})
kelas ekspor PostsService {
konstruktor(pribadi _http: HttpClient) {}
dapatkanDaftarPosting() {
biarkan URL = "https://jsonplaceholder.typicode.com/posts";
kembalikan ini._http.get<Post[]>(URL);
}
} Sekarang, layanan ini dapat dipanggil kapan saja.
demo-resolver.service.ts
import { Dapat disuntikkan } dari "@angular/core";
impor {
Menyelesaikan,
Snapshot Rute yang Diaktifkan,
RouterStateSnapshot
} dari "@angular/router";
impor { PostsService } dari "../services/posts.service";
@Dapat disuntik({
disediakanDalam: "root"
})
kelas ekspor DemoResolverService mengimplementasikan Resolve<any> {
konstruktor(pribadi _postsService: PostsService) {}
tekad(rute: ActivatedRouteSnapshot, status: RouterStateSnapshot) {
kembalikan this._postsService.getPostList();
}
} Data daftar posting dikembalikan dari resolver . Sekarang, Anda memerlukan rute untuk mengonfigurasi resolver , mendapatkan data dari rute, dan kemudian menampilkan data dalam komponen. Untuk melakukan lompatan routing, kita perlu membuat sebuah komponen.
$ ng gc komponen/post-list --skipTests=true
Untuk membuat rute terlihat, tambahkan router-outlet di app.component.ts .
<router-outlet></router-outlet>
Sekarang, Anda bisa mengonfigurasi file app-routing.module.ts . Cuplikan kode berikut akan membantu Anda memahami resolver konfigurasi rute.
app-routing-module.ts
import { NgModule } dari "@angular/core";
impor { Rute, RouterModule } dari "@angular/router";
impor { PostListComponent } dari "./components/post-list/post-list.component";
impor { DemoResolverService } dari "./resolvers/demo-resolver.service";
rute const: Rute = [
{
jalur: "postingan",
komponen: PostListComponent,
menyelesaikan: {
posting: Layanan DemoResolver
}
},
{
jalur: "",
redirectTo: "postingan",
pathMatch: "penuh"
}
];
@NgModule({
impor: [RouterModule.forRoot(rute)],
ekspor: [RouterModule]
})
kelas ekspor AppRoutingModule {} resolve telah ditambahkan ke konfigurasi perutean, yang akan memulai permintaan HTTP dan kemudian mengizinkan komponen untuk melakukan inisialisasi ketika permintaan HTTP berhasil kembali. Rute akan mengumpulkan data yang dikembalikan oleh permintaan HTTP .
untuk menunjukkan kepada pengguna bahwa permintaan sedang berlangsung, kami menulis loader publik dan sederhana di AppComponent . Anda dapat menyesuaikannya sesuai kebutuhan.
aplikasi.component.html
<div class="loader" *ngIf="isLoader"> <div>Memuat...</div> </div> <router-outlet></router-outlet>
app.component.ts
impor { Komponen } dari "@angular/core";
impor {
perute,
Acara Router,
NavigasiMulai,
NavigasiAkhir
} dari "@angular/router";
@Komponen({
pemilih: "root-aplikasi",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
kelas ekspor Komponen Aplikasi {
isLoader: boolean;
konstruktor(pribadi _router: Router) {}
ngOnInit() {
ini.routerEvents();
}
routerEvents() {
this._router.events.subscribe((acara: RouterEvent) => {
beralih (benar) {
contoh kejadian kasus NavigationStart: {
this.isLoader = benar;
merusak;
}
contoh kejadian kasus NavigationEnd: {
ini.isLoader = salah;
merusak;
}
}
});
}
} Saat navigasi dimulai, nilai isLoader ditetapkan true , dan Anda akan melihat efek berikut pada halaman.
Saat resolver selesai diproses, penyelesainya akan disembunyikan.
Sekarang saatnya mengambil nilai dari rute dan menampilkannya.
port-list.component.ts
import { Komponen, OnInit } dari "@angular/core";
impor { Router, ActivatedRoute } dari "@angular/router";
impor { Posting } dari "src/app/models/post";
@Komponen({
pemilih: "daftar-pos-aplikasi",
templateUrl: "./post-list.component.html",
styleUrls: ["./post-list.component.scss"]
})
kelas ekspor PostListComponent mengimplementasikan OnInit {
kiriman: Kiriman[];
konstruktor(rute_pribadi: Rute Aktif) {
this.postingan = [];
}
ngOnInit() {
this.posts = this._route.snapshot.data["postingan"];
}
} Seperti yang ditunjukkan di atas, nilai post berasal dari data informasi snapshot ActivatedRoute . Kedua nilai ini dapat diperoleh selama Anda mengonfigurasi informasi yang sama di rute tersebut.
Kami merender sebagai berikut dalam HTML .
<div class="post-list grid-container">
<div class="card" *ngFor="biarkan postingan diposkan">
<div class="title"><b>{{posting?.title}}</b></div>
<div class="body">{{post.body}}</div>
</div>
</div> Gaya fragmen CSS membuatnya terlihat lebih indah.
port-list.component.css
.grid-container {
tampilan: kisi;
kolom-templat-kisi: kalk(100% / 3) kalk(100% / 3) kalk(100% / 3);
}
.kartu {
margin: 10 piksel;
bayangan kotak: hitam 0 0 2px 0px;
bantalan: 10 piksel;
} Disarankan untuk menggunakan scss preprocessor untuk menulis style.
Setelah mendapatkan data dari rute, maka akan ditampilkan dalam HTML . Efeknya adalah sebagai berikut: snapshot.
Pada titik ini, Anda telah mempelajari cara menggunakan resolver dalam proyek Anda.
Dikombinasikan dengan desain pengalaman pengguna, dan dengan bantuan resolver , Anda dapat meningkatkan kinerja aplikasi Anda. Untuk mempelajari lebih lanjut, Anda dapat mengunjungi situs resminya.
Artikel ini adalah terjemahan, menggunakan terjemahan gratis, dengan pemahaman pribadi dan komentar ditambahkan. Alamat aslinya adalah:
https://www.pluralsight.com/guides/prefetching-data-for-an-angular-route