Ketahui lebih lanjut tentang penghalaan dalam Angular dan bagaimana untuk bermula dengan cepat?

Artikel ini akan memberi anda pemahaman yang mendalam tentang penghalaan dalam Sudut, lihat cara untuk bermula dengan cepat dan memperkenalkan peraturan padanan, parameter penghalaan, sarang penghalaan, pengawal penghalaan, dll. Saya harap ia akan berguna kepada semua orang.

Dalam Angular, penghalaan adalah berdasarkan modul dan setiap modul boleh mempunyai laluannya sendiri. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

Bermula dengan pantas

Buat komponen halaman, Layout komponen dan Navigation komponen , Untuk kegunaan penghalaan

• Buat Halaman UtamaKomponen halamanng g c pages/home

• Buat Mengenai Kami Halaman Komponenng g c pages/about

• BuatReka LetakKomponenng g c pages/layout

• BuatNavigasiKomponen ng g c pages/navigation

Buat peraturan penghalaan

// app.module.ts
import { Routes } from "@angular/router"

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  }
]

Perkenalkan modul penghalaan dan mulakannya

// app.module.ts
import { RouterModule, Routes } from "@angular/router"

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
})
export class AppModule {}

Tambah soket penghalaan

<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 -->
<router-outlet></router-outlet>

Tentukan pautan dalam komponen navigasi

<a routerLink="/home">首页</a>
<a routerLink="/about">关于我们</a>

Peraturan padanan

1 Ubah hala

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  },
  {
    path: "",
    // 重定向
    redirectTo: "home",
    // 完全匹配
    pathMatch: "full"
  }
]

2 <span style="font-size: 16px;">404</span>404 Halaman

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "**",
    component: NotFoundComponent
  }
]

Parameter laluan

1 Parameter pertanyaan

<a routerLink="/about" [queryParams]="{ name: &#39;kitty&#39; }">关于我们</a>

import { ActivatedRoute } from "@angular/router"

export class AboutComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParamMap.subscribe(query => {
      query.get("name")
    })
  }
}

2 >

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about/:name",
    component: AboutComponent
  }
]

<a [routerLink]="[&#39;/about&#39;, &#39;zhangsan&#39;]">关于我们</a>

import { ActivatedRoute } from "@angular/router"

export class AboutComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      params.get("name")
    })
  }
}

Sarang laluan

Sarang laluan merujuk kepada cara menentukan laluan kanak-kanak

const routes: Routes = [
  {
    path: "about",
    component: AboutComponent,
    children: [
      {
        path: "introduce",
        component: IntroduceComponent
      },
      {
        path: "history",
        component: HistoryComponent
      }
    ]
  }
]

Cawangan bernama

<!-- about.component.html -->
<app-layout>
  <p>about works!</p>
  <a routerLink="/about/introduce">公司简介</a>
  <a routerLink="/about/history">发展历史</a>
  <div>
    <router-outlet></router-outlet>
  </div>
</app-layout>

Dedahkan komponen penghalaan kanak-kanak ke dalam saluran penghalaan yang berbeza

{
  path: "about",
  component: AboutComponent,
  children: [
    {
      path: "introduce",
      component: IntroduceComponent,
      outlet: "left"
    },
    {
      path: "history",
      component: HistoryComponent,
      outlet: "right"
    }
  ]
}

<!-- about.component.html -->
<app-layout>
  <p>about works!</p>
  <router-outlet name="left"></router-outlet>
  <router-outlet name="right"></router-outlet>
</app-layout>

<a
    [routerLink]="[
      &#39;/about&#39;,
      {
        outlets: {
          left: [&#39;introduce&#39;],
          right: [&#39;history&#39;]
        }
      }
    ]"
>关于我们</a>

Penghalaan navigasi

<!-- app.component.html -->
<button (click)="jump()">跳转到发展历史</button>

// app.component.ts
import { Router } from "@angular/router"

export class HomeComponent {
  constructor(private router: Router) {}
  jump() {
    this.router.navigate(["/about/history"], {
      queryParams: {
        name: "Kitty"
      }
    })
  }
}

Modul penghalaan

Mengabstrak konfigurasi penghalaan dalam modul akar ke dalam modul penghalaan yang berasingan, dipanggil modul penghalaan akar, dan kemudian memperkenalkan modul penghalaan akar ke dalam modul akar

import { NgModule } from "@angular/core"

import { HomeComponent } from "./pages/home/home.component"
import { NotFoundComponent } from "./pages/not-found/not-found.component"

const routes: Routes = [
  {
    path: "",
    component: HomeComponent
  },
  {
    path: "**",
    component: NotFoundComponent
  }
]

@NgModule({
  declarations: [],
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  // 导出 Angular 路由功能模块，因为在根模块的根组件中使用了 RouterModule 模块中提供的路由插座组件
  exports: [RouterModule]
})
export class AppRoutingModule {}

Malas memuatkan laluan

import { BrowserModule } from "@angular/platform-browser"
import { NgModule } from "@angular/core"
import { AppComponent } from "./app.component"
import { AppRoutingModule } from "./app-routing.module"

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Malas memuatkan laluan adalah berdasarkan modul.

Buat modul pengguna
• dan buat modul penghalaan modul ini

  ng g m user --routing=true

Buat komponen halaman log masuk

• ng g c user/pages/login

Buat komponen halaman pendaftaran

• ng g c user/pages/register

Konfigurasikan peraturan penghalaan modul pengguna

import { NgModule } from "@angular/core"
import { Routes, RouterModule } from "@angular/router"
import { LoginComponent } from "./pages/login/login.component"
import { RegisterComponent } from "./pages/register/register.component"

const routes: Routes = [
  {
    path: "login",
    component: LoginComponent
  },
  {
    path: "register",
    component: RegisterComponent
  }
]

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

Kaitkan modul penghalaan pengguna dengan modul penghalaan utama

• // app-routing.module.ts
  const routes: Routes = [
    {
      path: "user",
      loadChildren: () => import("./user/user.module").then(m => m.UserModule)
    }
  ]

Tambah pautan akses dalam komponen navigasi

• <a routerLink="/user/login">登录</a>
  <a routerLink="/user/register">注册</a>

Pengawal laluan

Pengawal laluan akan memberitahu laluan sama ada navigasi ke laluan yang diminta dibenarkan.

Kaedah pengawal laluan boleh mengembalikan

atau

atau boolean, yang pada satu ketika pada masa hadapan menyelesaikan kepada nilai Boolean Observable <boolean>Promise <boolean>

1, <span style="font-size: 16px;">CanActivate</span><span style="font-size: 16px;">CanActivate</span>

Menyemak sama ada pengguna boleh mengakses laluan tertentu.

ialah antara muka, dan kelas pengawal laluan mesti melaksanakan antara muka ini. Antara muka menetapkan bahawa kelas perlu mempunyai kaedah CanActivate, yang menentukan sama ada untuk membenarkan akses kepada laluan sasaran. canActivate

Pengawal berbilang boleh digunakan pada laluan Hanya jika semua kaedah pengawal dibenarkan, laluan itu dibenarkan untuk diakses Jika satu kaedah pengawal tidak dibenarkan, laluan itu tidak dibenarkan untuk diakses.

Buat pengawal laluan:

ng g guard guards/auth

import { Injectable } from "@angular/core"
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from "@angular/router"
import { Observable } from "rxjs"

@Injectable({
  providedIn: "root"
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}
  canActivate(): boolean | UrlTree {
    // 用于实现跳转
    return this.router.createUrlTree(["/user/login"])
    // 禁止访问目标路由
    return false
    // 允许访问目标路由
    return true
  }
}

{
  path: "about",
  component: AboutComponent,
  canActivate: [AuthGuard]
}

2, CanActivateChild<span style="font-size: 16px;">CanActivateChild</span>

Semak sama ada pengguna boleh mengakses sub-laluan.

Buat pengawal laluan: ng g guard guards/admin

Nota: Untuk memilih CanActivateChild, anda perlu mengalihkan anak panah ke pilihan ini dan ketik ruang untuk mengesahkan pemilihan

import { Injectable } from "@angular/core"
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from "@angular/router"
import { Observable } from "rxjs"

@Injectable({
  providedIn: "root"
})
export class AdminGuard implements CanActivateChild {
  canActivateChild(): boolean | UrlTree {
    return true
  }
}

{
  path: "about",
  component: AboutComponent,
  canActivateChild: [AdminGuard],
  children: [
    {
      path: "introduce",
      component: IntroduceComponent
    }
  ]
}

3 <span style="font-size: 16px;">CanDeactivate</span>Boleh Nyahaktifkan

Semak sama ada pengguna boleh keluar dari laluan. Sebagai contoh, kandungan yang dimasukkan oleh pengguna dalam borang tidak disimpan dan pengguna mahu meninggalkan laluan Pada masa ini, pengawal boleh dipanggil untuk menggesa pengguna

import { Injectable } from "@angular/core"
import {
  CanDeactivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  UrlTree
} from "@angular/router"
import { Observable } from "rxjs"

export interface CanComponentLeave {
  canLeave: () => boolean
}

@Injectable({
  providedIn: "root"
})
export class UnsaveGuard implements CanDeactivate<CanComponentLeave> {
  canDeactivate(component: CanComponentLeave): boolean {
    if (component.canLeave()) {
      return true
    }
    return false
  }
}

{
  path: "",
  component: HomeComponent,
  canDeactivate: [UnsaveGuard]
}

import { CanComponentLeave } from "src/app/guards/unsave.guard"

export class HomeComponent implements CanComponentLeave {
  myForm: FormGroup = new FormGroup({
    username: new FormControl()
  })
  canLeave(): boolean {
    if (this.myForm.dirty) {
      if (window.confirm("有数据未保存, 确定要离开吗")) {
        return true
      } else {
        return false
      }
    }
    return true
  }

4, <span style="font-size: 16px;">Resolve</span> >Selesaikan

$ ng g resolver <name>

Membenarkan data diperoleh sebelum memasuki laluan, dan kemudian memasuki laluan selepas pemerolehan data selesai

import { Injectable } from "@angular/core"
import { Resolve } from "@angular/router"

type returnType = Promise<{ name: string }>

@Injectable({
  providedIn: "root"
})
export class ResolveGuard implements Resolve<returnType> {
  resolve(): returnType {
    return new Promise(function (resolve) {
      setTimeout(() => {
        resolve({ name: "张三" })
      }, 2000)
    })
  }
}

{
   path: "",
   component: HomeComponent,
   resolve: {
     user: ResolveGuard
   }
}

export class HomeComponent {
  constructor(private route: ActivatedRoute) {}
  ngOnInit(): void {
    console.log(this.route.snapshot.data.user)
  }
}

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video Pengaturcaraan! !

Atas ialah kandungan terperinci Ketahui lebih lanjut tentang penghalaan dalam Angular dan bagaimana untuk bermula dengan cepat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!