تحليل موجز لمسار التعلم الزاوي حسب الوحدة

في Angular،以模块为单位، ويمكن أن يكون لكل وحدة توجيه خاص بها. [توصية تعليمية ذات صلة: "البرنامج التعليمي الزاوي"]

ابدأ بسرعة

1. قم بإنشاء مكونات الصفحة ومكونات التخطيط ومكونات التنقل لاستخدام التوجيه

• إنشاء مكون الصفحة الرئيسية ng gc pages/home

• إنشاء مكون الصفحة حولنا ng gc pages/about

• إنشاء مكون التخطيط ng gc pages/layout

• إنشاء مكون التنقل ng gc pages/navigation

2. إنشاء قواعد التوجيه

// app.module. نهاية الخبر
استيراد {الطرق} من "@angular/router"

طرق ثابتة: طرق = [
  {
    المسار: "المنزل"،
    المكون: المكون المنزلي
  },
  {
    المسار: "حول"،
    المكون: حول المكون
  }
]

3. قدّم وحدة التوجيه وابدأ

// app.module.ts
استيراد { RouterModule، الطرق } من "@angular/router"

@NgModule({
  الواردات: [RouterModule.forRoot(routes, { useHash: true })]،
})
فئة التصدير AppModule {}

4. أضف路由插座

<!-- سيتم عرض مقبس التوجيه، أي مكون التوجيه المطابق لمكون العنصر النائب هنا -->
<router-outlet></router-outlet>

<a routerLink="/home">الصفحة الرئيسية</a>

في مكون التنقل

<a routerLink="/about">من نحن</a>

قواعد المطابقة

1. إعادة التوجيه

طرق ثابتة: طرق = [
  {
    المسار: "المنزل"،
    المكون: المكون المنزلي
  },
  {
    المسار: "حول"،
    المكون: حول المكون
  },
  {
    طريق: ""،
    // إعادة التوجيه إلى: "الصفحة الرئيسية"،
    // المطابقة التامة pathMatch: "كامل"
  }
]

2. 404

مسارات ثابتة للصفحة: المسارات = [
  {
    المسار: "المنزل"،
    المكون: المكون المنزلي
  },
  {
    المسار: "حول"،
    المكون: حول المكون
  },
  {
    طريق: "**"،
    المكون: NotFoundComponent
  }
]

معلمات التوجيه

1. معلمات الاستعلام

<a routerLink="/about" [queryParams]="{ name: 'kitty' }">نبذة عنا</a>

استيراد { ActivatedRoute } من "@angular/router"

فئة التصدير AboutComponent تنفذ OnInit {
  منشئ (مسار خاص: ActivatedRoute) {}

  ngOnInit (): باطل {
    this.route.queryParamMap.subscribe(query => {
      query.get("الاسم")
    })
  }
}

2. مسارات

ثابتة للمعلمات الديناميكية: الطرق = [
  {
    المسار: "المنزل"،
    المكون: المكون المنزلي
  },
  {
    المسار: "حول/:الاسم"،
    المكون: حول المكون
  }
]

<a [routerLink]="['/about', 'zhangsan']">من نحن</a>

استيراد { ActivatedRoute } من "@angular/router"

فئة التصدير AboutComponent تنفذ OnInit {
  منشئ (مسار خاص: ActivatedRoute) {}

  ngOnInit (): باطل {
    this.route.paramMap.subscribe(params => {
      params.get("الاسم")
    })
  }
}

تداخل المسار

يشير تداخل المسار إلى كيفية定义子级路由.

طرق ثابتة: الطرق = [
  {
    المسار: "حول"،
    المكون: حول المكون،
    أطفال: [
      {
        المسار: "أعرض"،
        المكون: تقديم المكون
      },
      {
        المسار: "التاريخ"،
        المكون: مكون التاريخ
      }
    ]
  }
]

<!-- about.component.html -->
<تخطيط التطبيق>
  <p>حول الأعمال!</p>
  <a routerLink="/about/introduce">ملف تعريف الشركة</a>
  <a routerLink="/about/history">سجل التطوير</a>
  <ديف>
    <مخرج التوجيه></مخرج التوجيه>
  </div>
</app-layout>

قم بتسمية المقبس

كشف مكونات التوجيه التابعة في منافذ توجيه مختلفة.

{
  المسار: "حول"،
  المكون: حول المكون،
  أطفال: [
    {
      المسار: "أعرض"،
      المكون: تقديم المكون،
      المخرج: "يسار"
    },
    {
      المسار: "التاريخ"،
      المكون: مكون التاريخ،
      المخرج: "صحيح"
    }
  ]
}

<!-- about.component.html -->
<تخطيط التطبيق>
  <p>حول الأعمال!</p>
  <اسم جهاز التوجيه المخرج = "left"></جهاز التوجيه المخرج>
  <اسم جهاز التوجيه المخرج = "يمين"></جهاز التوجيه المخرج>
</app-layout>

<a
    [رابط التوجيه]="[
      '/عن'،
      {
        المنافذ: {
          اليسار: ['إدخال']،
          صحيح: ["التاريخ"]
        }
      }
    ]"
    >من نحن</a>

طريق الملاحة

<!-- app.component.html -->
 <button (click)="jump()">انتقل إلى سجل التطوير</button>

// app.component.ts
استيراد {جهاز التوجيه} من "@angular/جهاز التوجيه"

فئة التصدير HomeComponent {
  منشئ (جهاز التوجيه الخاص: جهاز التوجيه) {}
  القفز () {
    this.router.navigate(["/about/history"], {
      معلمات الاستعلام: {
        الاسم: "كيتي"
      }
    })
  }
}

وحدة التوجيه

قم بتجريد تكوين التوجيه في الوحدة الجذرية إلى وحدة توجيه منفصلة تسمى根路由模块، ثم قم بإدخال وحدة التوجيه الجذر في الوحدة الجذرية.

استيراد {NgModule} من "@angular/core"

استيراد { HomeComponent } من "./pages/home/home.component"
استيراد {NotFoundComponent} من "./pages/not-found/not-found.component"

طرق ثابتة: الطرق = [
  {
    طريق: ""،
    المكون: المكون المنزلي
  },
  {
    طريق: "**"،
    المكون: NotFoundComponent
  }
]

@NgModule({
  الإعلانات: []،
  الواردات: [RouterModule.forRoot(routes, { useHash: true })]،
  // تصدير وحدة وظيفة التوجيه الزاوي، لأن مكون مقبس التوجيه المقدم في وحدة RouterModule يُستخدم في المكون الجذر لصادرات الوحدة الجذرية: [RouterModule]
})
فئة التصدير AppRoutingModule {}

استيراد { BrowserModule } من "@angular/platform-browser"
استيراد {NgModule} من "@angular/core"
استيراد {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]،
  مقدمي الخدمة: []،
  التمهيد: [مكون التطبيق]
})
تصدير فئة AppModule {}

توجيه التحميل البطيء

يعتمد التحميل البطيء للطرق على模块.

1. قم بإنشاء وحدة المستخدم ng gm user --routing=true وقم بإنشاء وحدة التوجيه لهذه الوحدة معًا

2. قم بإنشاء مكون صفحة تسجيل الدخول ng gc user/pages/login

3. قم بإنشاء مكون صفحة التسجيل ng gc user/pages/register

4. قواعد توجيه التكوين لوحدات المستخدم

استيراد { NgModule } من "@angular/core"
استيراد {الطرق، RouterModule} من "@angular/router"
استيراد {LoginComponent} من "./pages/login/login.component"
استيراد { RegisterComponent } من "./pages/register/register.component"

طرق ثابتة: الطرق = [
  {
    المسار: "تسجيل الدخول"،
    المكون: مكون تسجيل الدخول
  },
  {
    المسار: "التسجيل"،
    المكون: سجل المكون
  }
]

@NgModule({
  الواردات: [RouterModule.forChild(routes)]،
  الصادرات: [وحدة التوجيه]
})
فئة التصدير UserRoutingModule {}

5. قم بربط وحدة توجيه المستخدم بوحدة التوجيه الرئيسية

// app-routing.module.ts
طرق ثابتة: طرق = [
  {
    المسار: "المستخدم"،
    LoadChildren: () => import("./user/user.module").then(m => m.UserModule)
  }
]

<a routerLink="/user/login">تسجيل الدخول</a>

في مكون التنقل

<a routerLink="/user/register">تسجيل</a>

Route Guard

يخبر حارس المسار المسار ما إذا كان التنقل إلى المسار المطلوب مسموحًا به.

يمكن أن تُرجع أساليب حراسة المسار boolean أو Observable <boolean> أو Promise <boolean> ، والتي تتحول إلى قيمة منطقية في مرحلة ما في المستقبل.

1. يتحقق CanActivate

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

CanActivate为接口، ويجب على فئة حماية الطريق تنفيذ هذه الواجهة. تنص هذه الواجهة على أن الفئة تحتاج إلى طريقة canActivate، والتي تحدد ما إذا كان سيتم السماح بالوصول إلى المسار الهدف.

يمكن للمسار تطبيق多个守卫إذا تم السماح بجميع أساليب الحماية، فسيتم السماح بالوصول إلى المسار. إذا لم يتم السماح بطريقة حماية واحدة، فلن يُسمح بالوصول إلى المسار.

إنشاء حراس الطريق: ng g guard guards/auth

import { Injectable } from "@angular/core"
استيراد {CanActivate، ActivatedRouteSnapshot، RouterStateSnapshot، UrlTree، Router } من "@angular/router"
استيراد {يمكن ملاحظته} من "rxjs"

@الحقن({
  المقدمة في: "الجذر"
})
فئة التصدير AuthGuard تنفذ CanActivate {
  منشئ (جهاز التوجيه الخاص: جهاز التوجيه) {}
  يمكن التنشيط (): منطقي |.
    // يستخدم لتنفيذ إرجاع القفزة this.router.createUrlTree(["/user/login"])
    // تعطيل الوصول إلى المسار الهدف return false
    // السماح بالوصول إلى المسار المستهدف return true
  }
}

{
  المسار: "حول"،
  المكون: حول المكون،
  يمكن التنشيط: [AuthGuard]
}

2.

يتحقق CanActivateChild مما إذا كان بإمكان المستخدم الوصول إلى مسار فرعي معين.

إنشاء حارس طريق: ng g guard guards/admin ملاحظة: لتحديد CanActivateChild، حرك السهم إلى هذا الخيار وانقر فوق مسافة لتأكيد التحديد.

استيراد {Injectable} من "@angular/core"
استيراد {CanActivateChild، ActivatedRouteSnapshot، RouterStateSnapshot، UrlTree} من "@angular/router"
استيراد {يمكن ملاحظته} من "rxjs"

@الحقن({
  المقدمة في: "الجذر"
})
فئة التصدير AdminGuard تنفذ CanActivateChild {
  canActivateChild (): منطقي |.
    العودة صحيحا
  }
}

{
  المسار: "حول"،
  المكون: حول المكون،
  canActivateChild: [AdminGuard]،
  أطفال: [
    {
      المسار: "أعرض"،
      المكون: تقديم المكون
    }
  ]
}

3.

يتحقق CanDeactivate مما إذا كان بإمكان المستخدم الخروج من المسار.

على سبيل المثال، إذا لم يتم حفظ المحتوى الذي أدخله المستخدم في النموذج وأراد المستخدم مغادرة المسار، فيمكن استدعاء الحارس لمطالبة المستخدم.

استيراد {Injectable} من "@angular/core"
يستورد {
  يمكن إلغاء التنشيط،
  لقطة الطريق المنشط،
  راوتر ستيت لقطة،
  UrlTree
} من "@angular/جهاز التوجيه"
استيراد {يمكن ملاحظته} من "rxjs"

واجهة التصدير CanComponentLeave {
  canLeave: () => منطقية
}

@الحقن({
  المقدمة في: "الجذر"
})
فئة التصدير UnsaveGuard تنفذ CanDeactivate<CanComponentLeave> {
  يمكن إلغاء التنشيط (المكون: CanComponentLeave): منطقي {
    إذا (component.canLeave()) {
      العودة صحيحا
    }
    العودة كاذبة
  }
}

{
  طريق: ""،
  المكون: هومكومبونينت،
  يمكن إلغاء التنشيط: [UnsaveGuard]
}

استيراد { CanComponentLeave } من "src/app/guards/unsave.guard"

فئة التصدير HomeComponent تنفذ CanComponentLeave {
  myForm: FormGroup = مجموعة نماذج جديدة({
    اسم المستخدم: FormControl الجديد ()
  })
  يمكن ترك (): منطقي {
    إذا (هذا.myForm.dirty) {
      إذا (window.confirm("هناك بيانات لم يتم حفظها، هل أنت متأكد من رغبتك في المغادرة؟")) {
        العودة صحيحا
      } آخر {
        العودة كاذبة
      }
    }
    العودة صحيحا
  }

4.

يسمح لك الحل بالحصول على البيانات قبل الدخول إلى التوجيه، ثم الدخول إلى التوجيه بعد اكتمال الحصول على البيانات.

ng g resolver <name>

استيراد {Injectable} من "@angular/core"
استيراد { حل } من "@angular/جهاز التوجيه"

اكتب returnType = Promise<{ name: string }>

@الحقن({
  المقدمة في: "الجذر"
})
فئة التصدير ResolveGuard تنفذ Resolve<returnType> {
  حل (): نوع الإرجاع {
    إرجاع وعد جديد (وظيفة (حل) {
      setTimeout(() => {
        حل ({ الاسم: "تشانغ سان" })
      }، 2000)
    })
  }
}

{
   طريق: ""،
   المكون: هومكومبونينت،
   الحل: {
     المستخدم:ResolveGuard
   }
}

تصدير فئة HomeComponent {
  منشئ (مسار خاص: ActivatedRoute) {}
  ngOnInit (): باطل {
    console.log(this.route.snapshot.data.user)
  }
}