Menyelam lebih dalam ke dalam penghalaan dalam Angular

Apakah penghalaan? Artikel ini akan memberi anda pemahaman yang mendalam tentang penghalaan dalam Angular saya harap ia akan membantu anda!

Pengenalan kepada Penghalaan

Penghalaan ialah cara untuk melaksanakan aplikasi satu halaman, dengan mendengar cincang atau Perubahan dalam sejarah, memberikan komponen yang berbeza, memainkan peranan dalam kemas kini setempat, mengelakkan permintaan data daripada pelayan setiap kali URL berubah. [Cadangan tutorial berkaitan: "tutorial sudut"]

Konfigurasi penghalaan

Konfigurasikan modul penghalaan: approuter.module. ts

const routes: Routes = [
    { path: "first", component: FirstComponent },
    { path: "parent", component: SecondComponent }
]
@NgModule({
    imports: [
        CommonModule,
        // RouterModule.forRoot方法会返回一个模块，其中包含配置好的Router服务
        // 提供者，以及路由库所需的其它提供者。
        RouterModule.forRoot(routes, {
            // enableTracing: true, // <-- debugging purposes only
            // 配置所有的模块预加载，也就是懒加载的模块，在系统空闲时，把懒加载模块加载进来
            // PreloadAllModules 策略不会加载被CanLoad守卫所保护的特性区。
            preloadingStrategy: PreloadAllModules
          })
    ],
    exports: [
        FirstComponent,
        SecondComponent,
        RouterModule
    ],
    declarations: [
        FirstComponent,
        SecondComponent
    ]
})
export class ApprouterModule { }

Perkenalkan modul yang diubah suai ke dalam app.module.ts:

imports: [ ApprouterModule ]

Ubah hala:

const routes: Routes = [
    { path: "", redirectTo: "first", pathMatch: "full" }
]

Penghalaan kad liar:

const routes: Routes = [
    // 路由器会使用先到先得的策略来选择路由。 由于通配符路由是最不具体的那个，因此务必确保它是路由配置中的最后一个路由。
    { path: "**", component: NotFoundComponent }
]

Malas memuatkan laluan:

Mengkonfigurasi modul pemuatan malas boleh menjadikan paparan skrin pertama lebih pantas Modul yang sepadan hanya akan berubah apabila anda mengklik laluan pemuatan malas.

const routes: Routes = [
    {
        path: 'load',
        loadChildren: () => import('./load/load.module').then(m => m.ListModule),
        // CanLoadModule如果返回false，模块里面的子路由都没有办法访问
        canLoad: [CanLoadModule]
    },
]

Konfigurasi penghalaan modul pemuatan malas:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoadComponent } from './Load.component';
import { RouterModule, Routes } from '@angular/router';
import { LoadTwoComponent } from '../../../app/components/LoadTwo/LoadTwo.component';
import { LoadOneComponent } from '../../../app/components/LoadOne/LoadOne.component';

const routes: Routes = [
    {
        path: "",
        component: LoadComponent,
        children: [
            { path: "LoadOne", component: LoadOneComponent },
            { path: "LoadTwo", component: LoadTwoComponent }
        ]
    },

]

@NgModule({
    imports: [
        CommonModule,
        //子模块使用forChild配置
        RouterModule.forChild(routes)
    ],

    declarations: [
        LoadComponent,
        LoadOneComponent,
        LoadTwoComponent
    ]
})
export class LoadModule { }

Navigasi penghalaan modul pemuatan malas:

<a [routerLink]="[ &#39;LoadOne&#39; ]">LoadOne</a>
<a [routerLink]="[ &#39;LoadTwo&#39; ]">LoadTwo</a>
<router-outlet></router-outlet>

Penghantaran parameter laluan:

const routes: Routes = [
    { path: "second/:id", component: SecondComponent },
]

//routerLinkActive配置路由激活时的类
<a [routerLink]="[ &#39;/second&#39;, 12 ]" routerLinkActive="active">second</a>

Dapatkan penghantaran laluan Parameter:

import { ActivatedRoute, ParamMap, Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { switchMap } from 'rxjs/operators';

@Component({
    selector: 'app-second',
    templateUrl: './second.component.html',
    styleUrls: ['./second.component.scss']
})
export class SecondComponent implements OnInit {

    constructor(private activatedRoute: ActivatedRoute, private router: Router) { }

    ngOnInit() {

        console.log(this.activatedRoute.snapshot.params);  //{id: "12"}
        // console.log(this.activatedRoute);
        // 这种形式可以捕获到url输入 /second/18 然后点击<a [routerLink]="[ &#39;/second&#39;, 12 ]">second</a>   
        // 是可以捕获到的。上面那种是捕获不到的。因为不会触发ngOnInit，公用了一个组件实例。
        this.activatedRoute.paramMap.pipe(
            switchMap((params: ParamMap) => {
                console.log(params.get(&#39;id&#39;));
                return "param";
        })).subscribe(() => {

        })
    }
    gotoFirst() {
        this.router.navigate(["/first"]);
    }

}

queryParams nilai lulus parameter, pemerolehan parameter juga melalui suntikan pergantungan laluan yang diaktifkan

<!-- queryParams参数传值 -->
<a [routerLink]="[ &#39;/first&#39; ]" [queryParams]="{name: &#39;first&#39;}">first</a>   
<!-- ts中传值 -->
<!-- this.router.navigate([&#39;/first&#39;],{ queryParams: { name: &#39;first&#39; }); -->

Pengawal laluan: bolehAktifkan, bolehNyahaktifkan, selesaikan, bolehMuatkan

Pengawal laluan akan mengembalikan nilai Jika benar dikembalikan, pelaksanaan diteruskan, palsu menghalang tingkah laku dan UrlTree menavigasi ke laluan baharu. Pengawal laluan boleh menavigasi ke laluan lain, dalam hal ini ia akan mengembalikan palsu. Pengawal laluan mungkin bergantung pada nilai pelayan Tentukan sama ada untuk menavigasi, supaya anda juga boleh mengembalikan Promise atau Observable, dan laluan akan menunggu Nilai yang dikembalikan adalah benar atau salah. bolehAktifkan menavigasi ke laluan. canActivateChild menavigasi ke sub-laluan.

const routes: Routes = [
    {
        path: "parent",
        component: ParentComponent,
        canActivate: [AuthGuard],
        children: [
            // 无组件子路由
            {
                path: "",
                canActivateChild: [AuthGuardChild],
                children: [
                    { path: "childOne", component: ChildOneComponent },
                    { path: "childTwo", component: ChildTwoComponent }
                ]
            }
        ],
        // 有组件子路由
        // children: [
        //     { path: "childOne", component: ChildOneComponent },
        //     { path: "childTwo", component: ChildTwoComponent }
        // ]
    }
]

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): any {
    // return true;
    // 返回Promise的情况
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve(true);
        }, 3000);
    })
  }
}

import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  CanActivateChild
} from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class AuthGuardChild implements CanActivateChild {
  constructor() {}


  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
    return true;
  }
}

parent.component.html navigasi laluan:

<!-- 使用相对路径 -->
<a [routerLink]="[ &#39;./childOne&#39; ]">one</a>
<!-- 使用绝对路径 -->
<a [routerLink]="[ &#39;/parent/childTwo&#39; ]">two</a>
<router-outlet></router-outlet>

bolehNyahaktifkan laluan untuk keluar, menggesa pengguna bahawa maklumat itu belum disimpan.

const routes: Routes = [
    { path: "first", component: FirstComponent, canDeactivate: [CanDeactivateGuard] }
]

import { FirstComponent } from './components/first/first.component';
import { RouterStateSnapshot } from '@angular/router';
import { ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';

@Injectable({
    providedIn: 'root',
})
export class CanDeactivateGuard implements CanDeactivate<any> {
    canDeactivate(
        component: any,
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): boolean {
        // component获取到组件实例
        console.log(component.isLogin);
        return true;
    }
}

Sama ada canLoad boleh memasuki modul pemuatan malas:

const routes: Routes = [
    {
        path: 'load',
        loadChildren: () => import('./load/load.module').then(m => m.LoadModule),
        // CanLoadModule如果返回false，模块里面的子路由都没有办法访问
        canLoad: [CanLoadModule]
    }
]

import { Route } from '@angular/compiler/src/core';
import { Injectable } from '@angular/core';
import { CanLoad } from '@angular/router';


@Injectable({
    providedIn: 'root',
})
export class CanLoadModule implements CanLoad {
    canLoad(route: Route): boolean {

        return true;
      }
}

selesai mengkonfigurasi tempoh masa yang diperlukan untuk memasuki penghalaan Anda boleh mendapatkan data sebelum ini memasuki penghalaan untuk mengelakkan pembaziran masa Skrin

const routes: Routes = [
    { path: "resolve", component: ResolveDemoComponent, resolve: {detail: DetailResolver} 
]

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class DetailResolver implements Resolve<any> {

  constructor() { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve("resolve data");
        }, 3000);
    })
  }
}

ResolveDemoComponent mendapat nilai penyelesaian

constructor(private route: ActivatedRoute) { }
ngOnInit() {
    const detail = this.route.snapshot.data.detail;
    console.log(detail);
}

Dengar acara penghalaan:

constructor(private router: Router) {
    this.router.events.subscribe((event) => {
        // NavigationEnd,NavigationCancel,NavigationError,RoutesRecognized
        if (event instanceof NavigationStart) {
            console.log("NavigationStart");
        }
    })
}

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila layari: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Menyelam lebih dalam ke dalam penghalaan dalam Angular. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!