Analisis ringkas laluan pembelajaran sudut mengikut modul

Artikel ini akan membawa anda memahami modul penghalaan dalam sudut, dan memperkenalkan pengetahuan yang berkaitan seperti peraturan padanan, parameter penghalaan, sarang penghalaan, soket bernama, penghalaan navigasi, penghalaan pemuatan malas, dsb. harap ia akan berguna kepada anda Semua orang membantu!

Dalam Angular, penghalaan ialah 以模块为单位 dan setiap modul boleh mempunyai laluannya sendiri. [Tutorial berkaitan disyorkan: "tutorial sudut"]

Bermula dengan pantas

---

1. Buat komponen halaman, komponen Reka Letak dan Navigasi komponen , untuk kegunaan penghalaan

• BuatHalaman UtamaKomponen halamanng g c pages/home

• BuatPerihal kami Komponen Halamanng g c pages/about

• Buat Reka LetakKomponenng g c pages/layout

• Buat Navigasi Komponenng g c pages/navigation

2 Cipta peraturan penghalaan

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

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

3. Perkenalkan modul penghalaan dan mulakannya

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

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

4. Tambah 路由插座

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

5. Tentukan pautan

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

peraturan padanan dalam komponen navigasi

---

1 Ubah hala

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

2 , 404 muka surat

const routes: Routes = [
  {
    path: "home",
    component: HomeComponent
  },
  {
    path: "about",
    component: AboutComponent
  },
  {
    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")
    })
  }
}

Parameter dinamik

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 定义子级路由.

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

<!-- 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>

Daftar Dinamakan

---

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

---

<> 🎜>Abstrak konfigurasi penghalaan dalam modul akar ke dalam modul penghalaan yang berasingan, panggilnya

, dan kemudian perkenalkan modul penghalaan akar 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 {}

import { BrowserModule } from "@angular/platform-browser"
import { NgModule } from "@angular/core"
import { AppComponent } from "./app.component"
import { AppRoutingModule } from "./app-routing.module"
import { HomeComponent } from "./pages/home/home.component"
import { NotFoundComponent } from "./pages/not-found/not-found.component"

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

Malas memuatkan laluan

---

Malas memuatkan laluan adalah dalam unit

. 模块

1 Cipta modul pengguna

dan cipta modul penghalaan modul ini bersama-sama ng g m user --routing=true

2 Cipta komponen halaman log masuk

ng g c user/pages/login

3 . Buat komponen Halaman pendaftaran

ng g c user/pages/register

4 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 {}

5 Kaitkan modul penghalaan pengguna

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

6. Tambahkan 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 kembali

atau boolean atau Observable <boolean>, yang memutuskan kepada nilai boolean pada satu ketika pada masa hadapan. Promise <boolean>

1. CanActivate

Semak pengguna

. 是否可以访问某一个路由

CanActivate

, kelas pengawal laluan mesti melaksanakan antara muka ini, yang menetapkan bahawa kelas perlu mempunyai kaedah canActivate, yang menentukan sama ada untuk membenarkan akses kepada laluan sasaran. 为接口

Routing boleh digunakan

Hanya jika semua kaedah guard dibenarkan, laluan dibenarkan untuk diakses Jika satu kaedah guard tidak dibenarkan, maka laluan tersebut tidak dibenarkan untuk diakses. 多个守卫

Cipta 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

semak. Sama ada pengguna boleh mengakses sub-laluan tertentu.

Buat pengawal laluan:

Nota: Untuk memilih CanActivateChild, anda perlu mengalihkan anak panah ke pilihan ini dan ketik ruang untuk mengesahkan pemilihan. ng g guard guards/admin

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. Boleh Nyahaktifkan

Semak sama ada pengguna boleh keluar dari laluan.

Sebagai contoh, jika kandungan yang dimasukkan oleh pengguna dalam borang tidak disimpan dan pengguna ingin meninggalkan laluan, 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. Resolve

membenarkan untuk mendapatkan data sebelum memasuki laluan dan tunggu untuk data Selepas pemerolehan selesai, masukkan penghalaan.

ng g resolver <name>

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 Analisis ringkas laluan pembelajaran sudut mengikut modul. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!