El estudio angular señala seis razones

Sitio web oficial de enrutamiento angular

1. Empiece rápidamente

• El enrutamiento se basa en módulos y cada módulo puede tener su propia ruta. Cada ruta corresponde a un componente.
• En el módulo, debemos introducir RouterModuleel módulo RouterModuleque nos proporciona la función de enrutamiento. Y debe introducir y declarar los componentes que deben mostrarse.

...
import {
    
    RouterModule} from "@angular/router";
import {
    
     HomeComponent } from './pages/home/home.component';
import {
    
     AboutComponent } from './pages/about/about.component';
@NgModule({
    
    
    // 声明当前模块拥有哪些组件
    declarations: [
        AppComponent, // 根组件
        HomeComponent,
        AboutComponent,
    ],
    ...
})

• Defina reglas de enrutamiento y declare que el módulo actual depende del módulo de enrutamiento; al mismo tiempo, las reglas de enrutamiento deben pasarse al módulo de enrutamiento
• RouterModule.forRootEste método se utiliza para definir rutas. Este método garantiza que la aplicación solo creará una instancia de una RouterModule. El primer parámetro es una matriz de objetos. El objeto generalmente consta de dos atributos, pathque representan la ruta de la barra de direcciones y componentlos componentes que se cargan dinámicamente de acuerdo con la ruta. ; el segundo parámetro es el objeto de configuración, useHash:trueque indica el uso hashde enrutamiento en lugar de historyenrutamiento

...
// path开头不需要加斜线
const routes = [
    {
    
    path: 'home', component: HomeComponent},
    {
    
    path: 'about', component: AboutComponent},
];
...
@NgModule({
    
    
    ...
    imports: [BrowserModule, RouterModule.forRoot(routes, {
    
    useHash: true})],
    ...
})

• Defina enlaces de salto de enrutamiento (se deben agregar barras diagonales) y sockets de enrutamiento (marcadores de posición) en el componente raíz del módulo.
• routerLinkes una Angulardirectiva incorporada que conecta las rutas que usted define al archivo de plantilla.

<a routerLink="/home">首页</a>  |
<a routerLink="/about">关于</a>
<router-outlet></router-outlet>

• Al hacer clic en estos dos aenlaces, urlel contenido representado por la dirección y la ubicación del socket de enrutamiento cambiará en consecuencia.
  

2. Reglas de coincidencia

(1) Redirigir

• homeRedirigir a la ruta cuando no hay una dirección de ruta en la barra de direcciones
• De forma predeterminada, Angularal hacer coincidir las reglas de enrutamiento, el prefijo coincide. pathSi está vacío, coincidirá con las conexiones de enrutamiento con el prefijo '/', por lo que debe agregarse para pathMatch:'full'indicar que las reglas de enrutamiento coinciden completamente.

const routes:Routes = [
    {
    
    path: 'home', component: HomeComponent},
    {
    
    path: 'about', component: AboutComponent},
    {
    
    path: '', redirectTo: 'home', pathMatch: 'full'}
];

(2) página 404

• Las reglas de enrutamiento coinciden de arriba a abajo. Cuando no coinciden todas las rutas, se debe mostrar una página 404.
• **Es un carácter comodín y coincidirá con todas las rutas, por lo que debe colocarse al final de la matriz.

const routes:Routes = [
    {
    
    path: 'home', component: HomeComponent},
    {
    
    path: 'about', component: AboutComponent},
    {
    
    path: '', redirectTo: 'home', pathMatch: 'full'},
    {
    
    path: '**', component: NotFoundComponent}
];

3. Parámetros de enrutamiento

(1) Parámetros de consulta

• [queryParams]Los parámetros de consulta utilizan enlace dinámico al definir conexiones de enrutamiento

<a routerLink="/about" [queryParams]="{name:'zs'}">关于</a>

• Cuando el componente correspondiente se representa dinámicamente, los parámetros pasados ​​se pueden obtener dentro del componente.
• ActivatedRouteSe utiliza para acceder a la información de enrutamiento correspondiente a componentes cargados dinámicamente.
• route.queryParamMapEs un Observableobjeto que guarda información del parámetro de consulta; getpuede obtener el valor correspondiente utilizando el método

import {
    
    ActivatedRoute} from '@angular/router';
export class AboutComponent {
    
    
    constructor(private route: ActivatedRoute) {
    
    }
    ngOnInit() {
    
    
        this.route.queryParamMap.subscribe(query => {
    
    
            console.log(query.get('name'));
        })
    }
}

(2) Parámetros dinámicos

• pathLos parámetros dinámicos deben reservar posiciones de parámetros en los atributos de las reglas de enrutamiento.

{
    
    path: 'about/:name/:age', component: AboutComponent},

• La plantilla del componente routerLinkdebe vincular una matriz dinámica y pasar la ruta y la lista de parámetros en secuencia.

<a [routerLink]="['/about','zhangsan',78]">关于</a>

• En el componente del objeto, obtenga información de parámetros dinámicos a través ActivatedRoutedel objeto de instancia.paramMap
  

4. Enrutamiento de subnivel

Al definir una ruta, childrenpuede definir rutas de subnivel a través de los atributos de la ruta.

{
    
    
     path: 'about',
     component: AboutComponent,
     children: [
         {
    
    path: 'company', component: CompanyComponent},
         {
    
    path: 'industry', component: IndustryComponent},
     ]
 },

En la página principal AboutComponent, defina el enlace de salto de la ruta secundaria y defina el socket de enrutamiento para la ruta secundaria.

<a routerLink="/about/company">公司</a>
<a routerLink="/about/industry">行业</a>
<router-outlet></router-outlet>

5. Rutas de navegación

El enrutamiento de navegación puede realizar un salto de página a la ruta del enrutamiento no secundario.

<button (click)="goHome()">点击跳转到首页</button>

// 需要引入Router模块
constructor(private router: Router) {
    
    }
goHome() {
    
    
	// 查询参数
    this.router.navigate(['/home'],{
    
    
        queryParams: {
    
    
            name: 'zhangsan'
        }
    })
    // 动态参数
   // this.router.navigate(['/home','zhangsan'])
}

6. Módulo de enrutamiento

Extraiga el código relacionado con la definición de enrutamiento y colóquelo en un módulo separado para su administración.

1. Defina un módulo en la ruta raíz ng g m route --flat=true. --flat=trueLa carpeta no se creará, pero src/applos archivos relevantes se crearán directamente en el proyecto actual. El valor predeterminado esfalse
2. Coloque el código que define las reglas de enrutamiento en la clase del módulo.
3. Defina la ruta en la clase del módulo y expórtelaRouterModule

  imports: [
    CommonModule,
    RouterModule.forRoot(routes, {
    
    useHash: true})
  ],
  exports: [RouterModule]

4. Importe el módulo de enrutamiento definido en AppModule

imports: [BrowserModule,RouteModule],

7. Carga diferida del módulo de enrutamiento

La carga diferida del módulo de enrutamiento permite al usuario solicitar solo el módulo raíz cuando solicita la aplicación por primera vez, y se cargarán otros módulos cuando el usuario acceda a la aplicación, optimizando la experiencia del usuario.

1. Cree un módulo con carga diferida; úselo mientras crea el módulo --routing=true. Esto angular-clinos ayudará directamente a crear el módulo de enrutamiento del módulo.

ng g m sports --routing=true

2. Crear el componente raíz del módulo.

ng g c sports

3. Defina el enrutamiento en sportsel módulo de enrutamiento; defina el enrutamiento en el módulo de funciones y úselo RouterModule.forChild. Solo se puede aceptar una matriz de configuración de enrutamiento como parámetro.

import {
    
    SportsComponent} from "./sports.component";

const routes: Routes = [
  {
    
    path: '', component: SportsComponent},
];

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

4. Defina las reglas de carga para este módulo de funciones en las reglas de enrutamiento del módulo de enrutamiento raíz.
   Cuando la dirección de enrutamiento sea /sport, cargue dinámicamente sportel módulo

{
    
    path: 'sports', loadChildren: () => import('./sports/sports.module').then(m => m.SportsModule)},

5. Definir enlaces de salto en la plantilla del componente raíz

<a routerLink="/sports">运动界面</a>

Desde la consola se puede ver sourcesque cuando se hace clic en el botón de la interfaz deportiva, sportsel módulo se cargará dinámicamente.

8. Guardia de ruta

El guardia de ruta le dirá a la ruta si se permite la navegación a la ruta solicitada.
El valor de retorno del guardia de ruta tiene cuatro situaciones:

1. Valor booleano: trueindica que se puede activar, falseindica que no se puede activar
2. UrlTree: representa un Urlárbol que puede ser redirigido a un nuevoUrl
3. Puede devolver async Promise<boolean | UrlTree>: representa una promesa, que se puede analizar como un booleano o Urlun árbol
4. Puede devolver Observable<boolean | UrlTree>: representa un objeto observable, que puede analizarse como un booleano o Urlun árbol.

(1) Puede activar

CanActivateEs una interfaz. Necesitamos personalizar una clase de protección de enrutamiento, y la clase de protección de enrutamiento debe implementar esta interfaz. Esta interfaz estipula que la clase debe tener canActivateun método para determinar si permite el acceso a la ruta. Una ruta puede aplicar múltiples guardias. Solo cuando todas las guardias estén permitidas, se podrá acceder a la ruta.

1. Cree una clase de protección de ruta y coloque el método de protección de rutang g guard guards/authGuard
2. Angular-cliSe creará un código básico para nosotros, en canActivateel método regresamos directamente false, indicando que no se permite el acceso a la ruta de destino.

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

// 被Injectable修饰，说明路由守卫类是一个服务类
@Injectable({
    
    
    providedIn: 'root'
})
// AuthGuardGuard:路由守卫类
export class AuthGuardGuard implements CanActivate {
    
    
    // canActivate:路由守卫方法
    // 参数：
    // route:ActivatedRouteSnapshot:路由快照，包含与当前组件相关的路由的当前瞬间信息。
    // state:RouterStateSnapshot:路由状态快照，表示路由器在当前瞬间的状态
    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
    
        return false;
    }
}

3. Aplicar la protección de ruta a la ruta correspondiente en las reglas de enrutamiento

{
    
    
    path: 'user',
    loadChildren: () => import('./user/user.module').then(m => m.UserModule),
    canActivate: [AuthGuardGuard]
},

(2) PuedeActivarNiño

Comprobar si se puede acceder a las rutas secundarias de una determinada ruta

1. Cree una clase de guardia de enrutamiento ng g guard about/abouty seleccioneCanActivateChild
2. canActivateChildCambie el valor de retorno del método afalse
3. Aplicar esta guardia a la ruta correspondiente, de modo que se puedan deshabilitar las aboutdos subrutas de la ruta .

{
    
    
    path: 'about',
    component: AboutComponent,
    children: [
        {
    
    path: 'company', component: CompanyComponent},
        {
    
    path: 'industry', component: IndustryComponent}
    ],
    canActivateChild: [AboutGuard]
},

4. Al hacer clic en estos dos enlaces de salto, la página no saltará.
   

（三）PuedeDesactivar

La detección de si el usuario puede abandonar la ruta actual se puede utilizar en escenarios en los que el usuario completa los elementos del formulario y se va antes de guardar.
La posibilidad de que la ruta pueda salir dependerá del componente donde se aplica actualmente la protección de ruta. La clase de componente que utiliza esta protección de ruta debe definir un método con el mismo nombre para indicarle a la protección de ruta si puede abandonar la página actual. Este método se llama en la protección de ruta para determinar cuál es el valor de retorno.

1. Crear clase de guardia de rutang g guard unsave/unsave
2. En la clase de protección de ruta, defina una interfaz para especificar el tipo de función de juicio que debe definirse en el componente aplicado a la protección de ruta. En canDeactivateel método, el valor de retorno se determina en función de la función de juicio del componente; regresar truesignifica que se permite abandonar la ruta actual y regresar falsesignifica que no se permite salir.

export interface CanLeave {
    
    
    canLeave: () => boolean;
}

export class UnsaveGuard implements CanDeactivate<unknown> {
    
    
    canDeactivate(
        component: unknown,
        currentRoute: ActivatedRouteSnapshot,
        currentState: RouterStateSnapshot,
        nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
    
        // @ts-ignore
        if (component.canLeave()) {
    
    
            return true;
        } else {
    
    
            if(confirm("是否离开当前页面？")){
    
    
                return true;
            }else{
    
    
                return false;
            }
        }
    }
}

3. Agregue el protector de ruta a la ruta correspondiente donde se define la ruta.

{
    
    
    path: 'home/:username',
    component: HomeComponent,
    canDeactivate: [UnsaveGuard]
},

4. En HomeComponentla clase de componente, debe implementar CanLeavela interfaz y definir canleaveun método para devolver un booleanvalor para indicarle al guardia de enrutamiento si la ruta actual puede salir.

export class HomeComponent implements CanLeave{
    
    
    canLeave(): boolean {
    
    
        return false;
    }
}

5. Aparecerá una ventana emergente cuando salga de la página de inicio. Haga clic en Aceptar para salir y haga clic en Desbloquear salto de ruta.

(4) Resolver

Realice una operación asincrónica para obtener datos antes de saltar a la ruta y realice el salto de ruta una vez completada la operación asincrónica.

1. Cree Resolveuna clase de guardia de enrutamiento ng g resolver resolvers/username. La clase Resolve también es una clase de servicio.
2. resolveDevuelve uno en el método Promise, obtiene y devuelve los datos requeridos de forma asincrónica

resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): Promise<String> {
    
    
    return new Promise<String>((resolve, reject) => {
    
    
        setTimeout(() => {
    
    
            resolve("张三");
        }, 2000);
    })
}

3. resolveAplique esta protección de enrutamiento a la ruta correspondiente y agregue un atributo a la definición de la regla de enrutamiento.Este atributo es una matriz, que keyes un atributo agregado al componente y valueapunta a la protección de ruta que obtiene los datos correspondientes.

{
    
    
    path: 'home/:username',
    component: HomeComponent,
    resolve: {
    
    
        username: UsernameResolver
    }
},

4. En el componente, this.route.snapshot.datapuede obtener los datos pasados ​​por el guardia de enrutamiento a través de atributos.

constructor(private route: ActivatedRoute) {
    
    
}
ngOnInit(): void {
    
    
    console.log(this.route.snapshot.data['username'])
}

5. Haga clic en el botón para saltar a la página de inicio. El salto se produce después de dos segundos y la salida de la consola