Angular 13 Router Navigate: Panduan Lengkap – Codewithaden

Untuk mengimplementasikan navigasi dalam satu halaman aplikasi sudut Anda, gunakan router.

Untuk menangani navigasi dari satu tampilan ke tampilan berikutnya, gunakan router sudut. Router memungkinkan navigasi dengan menafsirkan URL browser sebagai instruksi untuk mengubah tampilan.

Memperkenalkan Router 13 Angular

Router Angular adalah router JavaScript yang kuat yang dikelola oleh tim inti sudut. Kami tidak perlu berpisah, dan itu akan keluar dari kotak. Router menyediakan perpustakaan perutean yang komprehensif dengan kesempatan untuk memiliki banyak outlet router, strategi pencocokan jalur yang berbeda, akses mudah ke parameter rute, dan penjaga rute untuk melindungi komponen dari akses tidak sah.

Router sudut adalah blok mendasar dari platform sudut. Ini memungkinkan pengembang untuk membangun aplikasi satu halaman (SPA) dengan beberapa tampilan dan navigasi di antara mereka.

Router Angular menavigasi

Ke menavigasi rute yang berbeda, gunakan Angular router karena menyediakan metode untuk menavigasi rute yang berbeda menggunakan routerlink. Untuk menavigasi dari satu rute ke rute lain, kita membutuhkan dua komponen sudut. Setiap komponen berisi tampilan tertentu.

Router Angular mendukung Petunjuk RouterLink untuk membuat tautan navigasi. Arahan Navigasi mengambil jalur yang terkait dengan komponen untuk menavigasi.

Sintaksis

Home 

Dalam kode di atas, ‘/rumah’ adalah jalannya. Oleh karena itu, kita perlu memetakan komponen tertentu ke jalur / rumah.

Dalam Angular 13, ada app-routing.module.ts file modul. Dalam file itu, Anda dapat menentukan array rute yang berisi objek. Kita bisa mendefinisikan berbeda jalur dan komponen di objek -objek itu, dan Angular akan memetakan jalur ke komponen itu. Jadi itu akan membuat komponen spesifik ke jalur tertentu.

Angular 13 Routerlink

Jika Anda tidak tahu cara memperbarui ke Angular 13, maka periksa yang diperbarui Versi CLI Angular memandu.

Untuk membuat proyek Angular 13 baru, ketik perintah berikut.

ng new angularguard 

Saat membuat proyek baru, harap aktifkan perutean. Jadi itu akan membuat app-routing.module.ts mengajukan.

Sekarang, buat dua komponen berikut.

  1. Homecomponent
  2. DashboardComponent

Untuk membuat komponen dalam Angular, Anda harus mengetikkan perintah berikut.

ng g c home --skipTests=true
ng g c dashboard --skipTests=true 

Setelah membuat komponen, kami akan menentukan array rute yang berisi objek yang berbeda.

Jadi, tulis kode berikut di dalam app-routing.module.ts mengajukan.

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DashboardComponent } from './dashboard/dashboard.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent},
  { path: 'dashboard', component: DashboardComponent }
];

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

Anda dapat melihat bahwa kami telah menentukan rute array yang berisi dua objek. Kunci objek adalah sebagai berikut.

  1. jalur
  2. komponen

Anda dapat memetakan rute yang berbeda ke komponen yang berbeda di sini dan, akhirnya, mendaftarkan semua rute menggunakan Routermodule.forroot () fungsi.

Angular 13 router-outlet

Router-outlet adalah arahan yang disediakan oleh perpustakaan router sudut, di mana router menambahkan komponen yang dicocokkan berdasarkan URL browser saat ini.

Anda dapat menambahkan beberapa outlet router di aplikasi Anda sesuai kebutuhan Anda, memungkinkan Anda untuk menerapkan skenario perutean lanjutan. Lihat sintaks routet-outlet.

 

Komponen apa pun yang cocok dengan router akan menjadikannya saudara kandung dari outlet router.

Mari menulis arahan di dalam app.component.html file dalam contoh kami.

Welcome to router navigate

Sekarang, Anda memiliki tiga URL untuk diterjemahkan. Satu adalah akar, dan dua lainnya, kami telah mendefinisikan dalam rute array. Anda dapat mengakses komponen dengan URL berikut.

  1. http://localhost:4200/
  2. http://localhost:4200/home
  3. http://localhost:4200/dashboard

Saat ini, tidak ada bilah navigasi. Jadi mari kita tambahkan navigasi bootstrap dengan menginstal Bootstrap 4.

npm install bootstrap --save 

Daftarkan bootstrap.min.css file di dalam Angular.json mengajukan.

"styles": [
       "src/styles.css",
       "./node_modules/bootstrap/dist/css/bootstrap.min.css"
], 

Sekarang, kami akan menambahkan bilah navigasi di dalam app.component.html mengajukan.


Anda dapat melihat bahwa kami belum menulis arahan routerlink di dalam tag jangkar.

Untuk menavigasi dari satu rute ke rute lain, kita harus meletakkan Routerlink pengarahan.

Itu Routerlink Petunjuk mengambil jalur rute yang telah kami tentukan di dalam rute array.

Mari kita tambahkan arahan.



Simpan file, dan sekarang Anda dapat menavigasi dengan mudah dari satu rute ke rute lainnya.

Menavigasi secara terprogram melalui router sudut

Untuk menavigasi secara terprogram dalam sudut, gunakan layanan router yang kami suntikan ke dalam komponen kami.

Layanan Router Angular 13 menyediakan dua metode yang dapat Anda gunakan untuk menavigasi dari satu komponen ke komponen lain di kelas komponen Anda alih -alih menggunakan arahan routerlink dalam templat, seperti yang baru saja kita lihat.

Kedua metode ini adalah sebagai berikut.

  1. navigasi ()
  2. navigigyurl ()

Mereka dapat membantu dalam beberapa skenario pemrograman di mana Anda perlu memicu navigasi melalui kode. Kedua fungsi mengembalikan janji yang diselesaikan menjadi benar atau salah.

Itu navigigyurl () Metode mengambil string sebagai parameter.

Itu navigasi () Metode mengambil serangkaian segmen URL.

Metode Angular Router Navigate ().

Metode Router Navigates () menerima array parameter tautan satu item yang sama dengan yang dapat Anda ikat ke arahan [routerlink].

Untuk menavigasi secara terprogram dalam sudut, gunakan metode router navigate ().

Dalam contoh kami, mari kita lihat cara menggunakan metode router navigate ().

Tulis kode berikut di dalam home.component.ts mengajukan.

// home.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
    setTimeout(() => {
      this.router.navigate(['/dashboard']);
    }, 1000);
  }
}
 

Dalam contoh ini, kami secara terprogram menavigasi rute dari /rumah ke /dasbor.

Itu Ngoninit () Fungsi secara otomatis dipanggil saat komponen diinisialisasi, dan kemudian setelah menunggu 1 detik, router secara terprogram menavigasi ke /dasbor rute menggunakan fungsi router.navigate ().

Jadi, pergi ke rute rumah menggunakan navbar, dan kemudian setelah satu detik, Anda akan menavigasi ke /dasbor rute. Anda dapat secara terprogram menavigasi ke rute tertentu dalam sudut berdasarkan kondisi khusus Anda.

Angular Router.NavigateByUrl ()

Itu router.navigateUrl () Fungsi mengambil URL pengalihan.

Dalam skenario kami, kami dapat menggunakan router.navigateByurl () fungsi bukan fungsi router.navigate ().

Tulis kode berikut di dalam home.component.ts mengajukan.

// home.component.ts

ngOnInit(): void {
    setTimeout(() => {
      this.router.navigateByUrl('/dashboard');
    }, 1000);
  } 

Simpan file, dan Anda akan mendapatkan output yang sama. Namun, Anda akan diarahkan ke /dasbor rute setelah satu detik

Kesimpulan

Navigasi rute dalam aplikasi satu halaman adalah implementasi pemrograman yang paling umum. Dalam tutorial ini, kita telah melihat cara menavigasi rute yang berbeda menggunakan routerlink, cara standar, dan router.navigate () atau router.navigateByurl () fungsi, yang secara terprogram dalam sudut.

Itu untuk panduan menavigasi Router Angular 13 ini.

Lihat juga

Routing sudut dan subrutin

Routerlink sudut

Tutorial sudut

Fitur sudut

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *