การวิเคราะห์โดยย่อของเส้นทางการเรียนรู้เชิงมุมตามโมดูล

ในเชิงมุม การกำหนดเส้นทาง以模块为单位และแต่ละโมดูลสามารถมีเส้นทางของตัวเองได้ [คำแนะนำบทช่วยสอนที่เกี่ยวข้อง: "บทช่วยสอนเชิงมุม"]

เริ่มต้นอย่างรวดเร็ว

1. สร้างส่วนประกอบของหน้า ส่วนประกอบเค้าโครง และส่วนประกอบการนำทางสำหรับการใช้เส้นทาง

• สร้างส่วนประกอบของ โฮมเพจ ng gc pages/home

• สร้างส่วนประกอบของหน้า เกี่ยวกับเรา ng gc pages/about

• สร้างส่วนประกอบ เค้าโครง ng gc pages/layout

• สร้างส่วนประกอบ การนำทาง ng gc pages/navigation

2. สร้างกฎการกำหนดเส้นทาง

// app.module ทีเอส
นำเข้า { เส้นทาง } จาก "@เชิงมุม/เราเตอร์"

เส้นทาง const: เส้นทาง = [
  -
    เส้นทาง: "บ้าน"
    ส่วนประกอบ:HomeComponent
  -
  -
    เส้นทาง: "เกี่ยวกับ"
    ส่วนประกอบ: AboutComponent
  -
]

3. แนะนำโมดูลการกำหนดเส้นทางและเริ่ม

// app.module.ts
นำเข้า { RouterModule, เส้นทาง } จาก "@เชิงมุม/เราเตอร์"

@NgModule({
  การนำเข้า: [RouterModule.forRoot(เส้นทาง, { useHash: true })],
-
ส่งออกคลาส AppModule {}

4. เพิ่ม路由插座

<!-- ซ็อกเก็ตการกำหนดเส้นทางซึ่งก็คือส่วนประกอบการกำหนดเส้นทางที่ตรงกับส่วนประกอบตัวยึดตำแหน่งจะแสดงที่นี่ -->
<router-outlet></router-outlet>

<a routerLink="/home">หน้าแรก</a>

ในส่วนประกอบการนำทาง

<a routerLink="/about">เกี่ยวกับเรา</a>

กฎการจับคู่

1. เปลี่ยนเส้นทาง

เส้นทาง const: เส้นทาง = [
  -
    เส้นทาง: "บ้าน"
    ส่วนประกอบ:HomeComponent
  -
  -
    เส้นทาง: "เกี่ยวกับ"
    ส่วนประกอบ: AboutComponent
  -
  -
    เส้นทาง: "",
    // เปลี่ยนเส้นทาง เปลี่ยนเส้นทางไปที่: "บ้าน",
    //การจับคู่แบบตรงทั้งหมด pathMatch: "เต็ม"
  -
]

เส้นทาง const

404 หน้า

  -
    เส้นทาง: "บ้าน"
    ส่วนประกอบ:HomeComponent
  -
  -
    เส้นทาง: "เกี่ยวกับ"
    ส่วนประกอบ: AboutComponent
  -
  -
    เส้นทาง: "**",
    ส่วนประกอบ: NotFoundComponent
  -
]

พารามิเตอร์เส้นทาง

1. พารามิเตอร์การค้นหา

<a routerLink="/about" [queryParams]="{ name: 'kitty' }">เกี่ยวกับเรา</a>

นำเข้า { ActivatedRoute } จาก "@เชิงมุม/เราเตอร์"

คลาสส่งออก AboutComponent ใช้ OnInit {
  ตัวสร้าง (เส้นทางส่วนตัว: ActivatedRoute) {}

  ngOnInit(): เป็นโมฆะ {
    this.route.queryParamMap.subscribe (แบบสอบถาม => {
      query.get("ชื่อ")
    -
  -
}

2.

เส้นทาง const พารามิเตอร์แบบไดนามิก: เส้นทาง = [
  -
    เส้นทาง: "บ้าน"
    ส่วนประกอบ:HomeComponent
  -
  -
    เส้นทาง: "เกี่ยวกับ/:ชื่อ",
    ส่วนประกอบ: AboutComponent
  -
]

<a [routerLink]="['/about', 'zhangsan']">เกี่ยวกับเรา</a>

นำเข้า { ActivatedRoute } จาก "@เชิงมุม/เราเตอร์"

คลาสส่งออก AboutComponent ใช้ OnInit {
  ตัวสร้าง (เส้นทางส่วนตัว: ActivatedRoute) {}

  ngOnInit(): เป็นโมฆะ {
    this.route.paramMap.subscribe (params => {
      params.get("ชื่อ")
    -
  -
}

เส้นทางการซ้อน

การซ้อนเส้นทางหมายถึงวิธีการ定义子级路由

เส้นทาง const: เส้นทาง = [
  -
    เส้นทาง: "เกี่ยวกับ"
    ส่วนประกอบ: AboutComponent,
    เด็ก: [
      -
        เส้นทาง: "แนะนำ"
        ส่วนประกอบ: IntroduceComponent
      -
      -
        เส้นทาง: "ประวัติศาสตร์"
        ส่วนประกอบ: HistoryComponent
      -
    -
  -
]

<!-- about.component.html -->
<รูปแบบแอป>
  <p>เกี่ยวกับผลงาน!</p>
  <a routerLink="/about/introduce">โปรไฟล์บริษัท</a>
  <a routerLink="/about/history">ประวัติการพัฒนา</a>
  <div>
    <เราเตอร์-เต้าเสียบ></เราเตอร์-เต้าเสียบ>
  </div>
</app-layout>

ตั้งชื่อซ็อกเก็ต

เปิดเผยส่วนประกอบการกำหนดเส้นทางย่อยในช่องทางการจัดเส้นทางที่แตกต่างกัน

-
  เส้นทาง: "เกี่ยวกับ"
  ส่วนประกอบ: AboutComponent,
  เด็ก: [
    -
      เส้นทาง: "แนะนำ"
      ส่วนประกอบ: IntroduceComponent,
      ทางออก: "ซ้าย"
    -
    -
      เส้นทาง: "ประวัติศาสตร์"
      ส่วนประกอบ: HistoryComponent,
      ทางออก: "ถูกต้อง"
    -
  -
}

<!-- about.component.html -->
<รูปแบบแอป>
  <p>เกี่ยวกับผลงาน!</p>
  <ชื่อเราเตอร์ร้าน = "ซ้าย"></ เราเตอร์ร้าน>
  <ชื่อเราเตอร์ร้าน = "ขวา"></ เราเตอร์ร้าน>

/รูปแบบแอป>

<ก
    [เราเตอร์ลิงค์]="[
      '/เกี่ยวกับ',
      -
        ร้านค้า: {
          ซ้าย: ['แนะนำ'],
          ขวา: ['ประวัติศาสตร์']
        -
      -
    -
    >เกี่ยวกับเรา</a>

เส้นทางการเดินเรือ

<!-- app.component.html -->
 <button (click)="jump()">ข้ามไปยังประวัติการพัฒนา</button>

// app.component.ts
นำเข้า { เราเตอร์ } จาก "@เชิงมุม/เราเตอร์"

ส่งออกคลาส HomeComponent {
  ตัวสร้าง (เราเตอร์ส่วนตัว: เราเตอร์) {}
  กระโดด() {
    this.router.navigate(["/about/history"], {
      แบบสอบถามพารามิเตอร์: {
        ชื่อ: "คิตตี้"
      -
    -
  -
}

โมดูลการกำหนดเส้นทาง

สรุปการกำหนดค่าการกำหนดเส้นทางในโมดูลรากลงในโมดูลการกำหนดเส้นทางแยกต่างหาก เรียกว่า根路由模块จากนั้นแนะนำโมดูลการกำหนดเส้นทางรากลงในโมดูลราก

นำเข้า { NgModule } จาก "@เชิงมุม/แกน"

นำเข้า { HomeComponent } จาก "./pages/home/home.component"
นำเข้า { NotFoundComponent } จาก "./pages/not-found/not-found.component"

เส้นทาง const: เส้นทาง = [
  -
    เส้นทาง: "",
    ส่วนประกอบ:HomeComponent
  -
  -
    เส้นทาง: "**",
    ส่วนประกอบ: NotFoundComponent
  -
-

@NgModule({
  ประกาศ: [],
  การนำเข้า: [RouterModule.forRoot(เส้นทาง, { useHash: true })],
  // ส่งออกโมดูลฟังก์ชันการกำหนดเส้นทางเชิงมุม เนื่องจากส่วนประกอบซ็อกเก็ตการกำหนดเส้นทางที่ให้ไว้ในโมดูล RouterModule ถูกใช้ในส่วนประกอบรากของการส่งออกโมดูลราก: [RouterModule]
-
ส่งออกคลาส AppRoutingModule {}

นำเข้า { BrowserModule } จาก "@เชิงมุม/แพลตฟอร์มเบราว์เซอร์"
นำเข้า { NgModule } จาก "@เชิงมุม/แกน"
นำเข้า {AppComponent} จาก "./app.component"
นำเข้า { AppRoutingModule } จาก "./app-routing.module"
นำเข้า { HomeComponent } จาก "./pages/home/home.component"
นำเข้า { NotFoundComponent } จาก "./pages/not-found/not-found.component"

@NgModule({
  ประกาศ: [AppComponent, HomeComponent, NotFoundComponent],
  การนำเข้า: [BrowserModule, AppRoutingModule],
  ผู้ให้บริการ: [],
  บูตสแตรป: [AppComponent]
-
ส่งออกคลาส AppModule {}

กำหนดเส้นทางการโหลดแบบ Lazy Loading

การโหลดเส้นทางแบบ Lazy ขึ้นอยู่กับ模块

1. สร้างโมดูลผู้ใช้ ng gm user --routing=true และสร้างโมดูลการกำหนดเส้นทางของโมดูลนี้ร่วมกัน

2. สร้างส่วนประกอบของหน้าเข้าสู่ระบบ ng gc user/pages/login

3. สร้างส่วนประกอบของหน้าการลงทะเบียน ng gc user/pages/register

4. กฎการกำหนดเส้นทางการกำหนดค่าสำหรับโมดูลผู้ใช้

นำเข้า { NgModule } จาก "@เชิงมุม/core"
นำเข้า { เส้นทาง, RouterModule } จาก "@เชิงมุม/เราเตอร์"
นำเข้า { LoginComponent } จาก "./pages/login/login.component"
นำเข้า { RegisterComponent } จาก "./pages/register/register.component"

เส้นทาง const: เส้นทาง = [
  -
    เส้นทาง: "เข้าสู่ระบบ"
    ส่วนประกอบ: LoginComponent
  -
  -
    เส้นทาง: "ลงทะเบียน",
    ส่วนประกอบ: RegisterComponent
  -
-

@NgModule({
  การนำเข้า: [RouterModule.forChild(เส้นทาง)],
  ส่งออก: [โมดูลเราเตอร์]
-
ส่งออกคลาส UserRoutingModule {}

5. เชื่อมโยงโมดูลการกำหนดเส้นทางผู้ใช้กับโมดูลการกำหนดเส้นทางหลัก

// app-routing.module.ts
เส้นทาง const: เส้นทาง = [
  -
    เส้นทาง: "ผู้ใช้",
    loadChildren: () => นำเข้า ("./user/user.module"). แล้ว (m => m.UserModule)
  -
]

<a routerLink="/user/login">เข้าสู่ระบบ</a>

ในส่วนประกอบการนำทาง

<a routerLink="/user/register">ลงทะเบียน</a>

การป้องกันเส้นทาง

เจ้าหน้าที่รักษาเส้นทางจะบอกเส้นทางว่าอนุญาตให้นำทางไปยังเส้นทางที่ร้องขอได้หรือไม่

วิธีการป้องกันเส้นทางสามารถส่งคืน boolean หรือ Observable <boolean> หรือ Promise <boolean> ซึ่งแก้ไขเป็นค่าบูลีน ณ จุดใดจุดหนึ่งในอนาคต

1. CanActivate

ตรวจสอบ是否可以访问某一个路由

CanActivate为接口และคลาสป้องกันเส้นทางต้องใช้อินเทอร์เฟซนี้ อินเทอร์เฟซนี้กำหนดว่าคลาสจำเป็นต้องมีเมธอด canActivate ซึ่งกำหนดว่าจะอนุญาตการเข้าถึงเส้นทางเป้าหมายหรือไม่

เส้นทางสามารถใช้多个守卫หากอนุญาตวิธีป้องกันทั้งหมด จะอนุญาตให้เข้าถึงเส้นทางได้ หากไม่อนุญาตให้ใช้วิธีป้องกันวิธีใดวิธีหนึ่ง

สร้างตัวป้องกันเส้นทาง: ng g guard guards/auth

import { Injectable } จาก "@เชิงมุม/core"
นำเข้า { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, เราเตอร์ } จาก "@เชิงมุม/เราเตอร์"
นำเข้า { สังเกตได้ } จาก "rxjs"

@ฉีด({
  ให้ไว้ใน: "ราก"
-
คลาสส่งออก AuthGuard ใช้ CanActivate {
  ตัวสร้าง (เราเตอร์ส่วนตัว: เราเตอร์) {}
  canActivate(): บูลีน | .
    // ใช้เพื่อใช้ Jump return this.router.createUrlTree(["/user/login"])
    // ปิดการเข้าถึงเส้นทางเป้าหมาย return false
    //อนุญาตให้เข้าถึงเส้นทางเป้าหมายคืนค่าจริง
  -
}

{
  เส้นทาง: "เกี่ยวกับ"
  ส่วนประกอบ: AboutComponent,
  สามารถเปิดใช้งาน: [AuthGuard]
}

2. CanActivateChild

ตรวจสอบว่าผู้ใช้สามารถเข้าถึงเส้นทางย่อยบางเส้นทางได้หรือไม่

สร้างการป้องกันเส้นทาง: ng g guard guards/admin หมายเหตุ: หากต้องการเลือก CanActivateChild ให้เลื่อนลูกศรไปที่ตัวเลือกนี้แล้วแตะช่องว่างเพื่อยืนยันการเลือก

นำเข้า { ฉีดได้ } จาก "@เชิงมุม/แกน"
นำเข้า { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } จาก "@เชิงมุม/เราเตอร์"
นำเข้า { สังเกตได้ } จาก "rxjs"

@ฉีด({
  ให้ไว้ใน: "ราก"
-
คลาสส่งออก AdminGuard ใช้ CanActivateChild {
  canActivateChild(): บูลีน | .
    กลับเป็นจริง
  -
}

{
  เส้นทาง: "เกี่ยวกับ"
  ส่วนประกอบ: AboutComponent,
  canActivateChild: [ผู้ดูแลระบบ],
  เด็ก: [
    -
      เส้นทาง: "แนะนำ"
      ส่วนประกอบ: IntroduceComponent
    -
  -
}

3. CanDeactivate

ตรวจสอบว่าผู้ใช้สามารถออกจากเส้นทางได้หรือไม่

ตัวอย่างเช่น หากเนื้อหาที่ผู้ใช้ป้อนในแบบฟอร์มไม่ได้รับการบันทึก และผู้ใช้ต้องการออกจากเส้นทาง ก็สามารถเรียกเจ้าหน้าที่รักษาความปลอดภัยมาแจ้งให้ผู้ใช้ทราบได้

นำเข้า { ฉีดได้ } จาก "@เชิงมุม/แกน"
นำเข้า {
  สามารถปิดการใช้งานได้,
  เปิดใช้งานRouteSnapshot,
  RouterStateSnapshot,
  UrlTree
} จาก "@เชิงมุม/เราเตอร์"
นำเข้า { สังเกตได้ } จาก "rxjs"

อินเทอร์เฟซการส่งออก CanComponentLeave {
  canLeave: () => บูลีน
-

@ฉีด({
  ให้ไว้ใน: "ราก"
-
คลาสส่งออก UnsaveGuard ใช้ CanDeactivate<CanComponentLeave> {
  canDeactivate (ส่วนประกอบ: CanComponentLeave): บูลีน {
    ถ้า (component.canLeave()) {
      กลับเป็นจริง
    -
    กลับเท็จ
  -
}

{
  เส้นทาง: "",
  ส่วนประกอบ: HomeComponent,
  สามารถปิดการใช้งาน: [UnsaveGuard]
}

นำเข้า { CanComponentLeave } จาก "src/app/guards/unsave.guard"

คลาสส่งออก HomeComponent ใช้ CanComponentLeave {
  myForm: FormGroup = FormGroup ใหม่ ({
    ชื่อผู้ใช้: FormControl ใหม่ ()
  -
  canLeave(): บูลีน {
    ถ้า (this.myForm.dirty) {
      if (window.confirm("มีข้อมูลที่ยังไม่ได้บันทึก คุณแน่ใจหรือไม่ว่าต้องการออก?")) {
        กลับเป็นจริง
      } อื่น {
        กลับเท็จ
      -
    -
    กลับเป็นจริง
  }

4. Resolve

ช่วยให้คุณได้รับข้อมูลก่อนที่จะเข้าสู่การกำหนดเส้นทาง จากนั้นจึงเข้าสู่การกำหนดเส้นทางหลังจากการรับข้อมูลเสร็จสิ้น

ng g resolver <name>

นำเข้า { ฉีดได้ } จาก "@เชิงมุม/แกน"
นำเข้า { แก้ไข } จาก "@เชิงมุม/เราเตอร์"

พิมพ์ returnType = สัญญา<{ ชื่อ: สตริง }>

@ฉีด({
  ให้ไว้ใน: "ราก"
-
คลาสส่งออก ResolveGuard ใช้งาน Resolve<returnType> {
  แก้ไข (): returnType {
    คืนสัญญาใหม่ (ฟังก์ชั่น (แก้ไข) {
      setTimeout(() => {
        แก้ไข ({ ชื่อ: "จางซาน" })
      }, 2000)
    -
  -
}

{
   เส้นทาง: "",
   ส่วนประกอบ: HomeComponent,
   แก้ไข: {
     ผู้ใช้:ResolveGuard
   -
}

ส่งออกคลาส HomeComponent {
  ตัวสร้าง (เส้นทางส่วนตัว: ActivatedRoute) {}
  ngOnInit(): เป็นโมฆะ {
    console.log (this.route.snapshot.data.user)
  -
-