Un breve análisis de la ruta de aprendizaje angular por módulo.

En Angular, el enrutamiento以模块为单位y cada módulo puede tener su propio enrutamiento. [Recomendación de tutorial relacionado: "tutorial angular"]

Comience rápidamente

1. Cree componentes de página, componentes de diseño y componentes de navegación para uso de enrutamiento.

• Cree el componente de la página de inicio ng gc pages/home

• Cree el componente de la página Acerca de nosotros ng gc pages/about

• Cree el componente de diseño ng gc pages/layout

• Cree el componente de navegación ng gc pages/navigation

2. Cree reglas de enrutamiento

// app.module. ts
importar {Rutas} desde "@angular/router"

rutas constantes: Rutas = [
  {
    ruta: "casa",
    componente: InicioComponente
  },
  {
    ruta: "acerca de",
    componente: Acerca del componente
  }
]

3. Introduzca el módulo de enrutamiento e inicie

// app.module.ts
importar {RouterModule, Rutas} desde "@angular/router"

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

4. Agregue路由插座

<!-- El socket de enrutamiento, es decir, el componente de enrutamiento que coincide con el componente de marcador de posición se mostrará aquí -->
<router-outlet></router-outlet>

<a routerLink="/home">Página de inicio</a>

en el componente de navegación.

<a routerLink="/about">Acerca de nosotros</a>

Reglas de coincidencia

1. Redirigir

rutas constantes: Rutas = [
  {
    ruta: "casa",
    componente: InicioComponente
  },
  {
    ruta: "acerca de",
    componente: Acerca del componente
  },
  {
    camino: "",
    // Redirigir redirigir a: "casa",
    // Coincidencia exacta pathMatch: "completo"
  }
]

2.

Rutas constantes de 404 páginas: Rutas = [
  {
    ruta: "casa",
    componente: InicioComponente
  },
  {
    ruta: "acerca de",
    componente: Acerca del componente
  },
  {
    camino: "**",
    componente: NotFoundComponent
  }
]

Parámetros de enrutamiento

1. Parámetros de consulta

<a routerLink="/about" [queryParams]="{ name: 'kitty' }">Acerca de nosotros</a>

importar { ActivatedRoute } desde "@angular/router"

clase de exportación AboutComponent implementa OnInit {
  constructor (ruta privada: ActivatedRoute) {}

  ngOnInit(): nulo {
    this.route.queryParamMap.subscribe(consulta => {
      consulta.get("nombre")
    })
  }
}

2.

Rutas constantes del parámetro dinámico: Rutas = [
  {
    ruta: "casa",
    componente: InicioComponente
  },
  {
    ruta: "acerca de/:nombre",
    componente: Acerca del componente
  }
]

<a [routerLink]="['/about', 'zhangsan']">Acerca de nosotros</a>

importar { ActivatedRoute } desde "@angular/router"

clase de exportación AboutComponent implementa OnInit {
  constructor (ruta privada: ActivatedRoute) {}

  ngOnInit(): nulo {
    this.route.paramMap.subscribe(params => {
      params.get("nombre")
    })
  }
}

Anidamiento de rutas

El anidamiento de rutas se refiere a cómo定义子级路由.

rutas constantes: Rutas = [
  {
    ruta: "acerca de",
    componente: Acerca del componente,
    niños: [
      {
        ruta: "presentar",
        componente: IntroducirComponente
      },
      {
        ruta: "historia",
        componente: Componente Histórico
      }
    ]
  }
]

<!-- about.component.html -->
<diseño de aplicación>
  <p>¡Sobre obras!</p>
  <a routerLink="/about/introduce">Perfil de empresa</a>
  <a routerLink="/about/history">Historial de desarrollo</a>
  <div>
    <salida-enrutador></salida-enrutador>
  </div>
</app-layout>

Nombre el socket

Exponga los componentes de enrutamiento secundarios en diferentes salidas de enrutamiento.

{
  ruta: "acerca de",
  componente: Acerca del componente,
  niños: [
    {
      ruta: "presentar",
      componente: IntroducirComponente,
      salida: "izquierda"
    },
    {
      ruta: "historia",
      componente: componente histórico,
      salida: "derecha"
    }
  ]
}

<!-- acerca de.component.html -->
<diseño de aplicación>
  <p>¡Sobre obras!</p>
  <router-outlet nombre="izquierda"></router-outlet>
  <router-outlet nombre="derecho"></router-outlet>
</app-layout>

<a
    [enlaceenrutador]="[
      '/acerca de',
      {
        puntos de venta: {
          izquierda: ['presentar'],
          derecha: ['historia']
        }
      }
    ]"
    >Quienes somos</a>

Ruta de navegación

<!-- aplicación.componente.html -->
 <button (click)="jump()">Ir al historial de desarrollo</button>

// app.component.ts
importar {enrutador} desde "@angular/router"

exportar clase HomeComponent {
  constructor(enrutador privado: enrutador) {}
  saltar() {
    this.router.navigate(["/acerca de/historia"], {
      parámetros de consulta: {
        nombre: "gatito"
      }
    })
  }
}

Módulo de enrutamiento

Resuma la configuración de enrutamiento en el módulo raíz en un módulo de enrutamiento separado, llamado根路由模块, y luego introduzca el módulo de enrutamiento raíz en el módulo raíz.

importar {NgModule} desde "@angular/core"

importar {HomeComponent} desde "./pages/home/home.component"
importar {NotFoundComponent} desde "./pages/not-found/not-found.component"

rutas constantes: Rutas = [
  {
    camino: "",
    componente: InicioComponente
  },
  {
    camino: "**",
    componente: NotFoundComponent
  }
]

@NgModule({
  declaraciones: [],
  importaciones: [RouterModule.forRoot(rutas, {useHash: true})],
  // Exporta el módulo de función de enrutamiento angular, porque el componente de socket de enrutamiento proporcionado en el módulo RouterModule se usa en el componente raíz del módulo raíz exportado: [RouterModule]
})
exportar clase AppRoutingModule {}

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

@NgModule({
  declaraciones: [AppComponent, HomeComponent, NotFoundComponent],
  importaciones: [BrowserModule, AppRoutingModule],
  proveedores: [],
  arranque: [Componente de aplicación]
})
clase de exportación AppModule {}

ruta de carga diferida

La carga diferida de rutas se basa en模块.

1. Cree el módulo de usuario ng gm user --routing=true y cree el módulo de enrutamiento de este módulo juntos

2. Cree el componente de página de inicio de sesión ng gc user/pages/login

3. Cree el componente de página de registro ng gc user/pages/register

4. Reglas de enrutamiento de configuración para módulos de usuario

import { NgModule } desde "@angular/core"
importar {Rutas, RouterModule} desde "@angular/router"
importar {LoginComponent} desde "./pages/login/login.component"
importar { RegisterComponent } desde "./pages/register/register.component"

rutas constantes: Rutas = [
  {
    ruta: "iniciar sesión",
    componente: Componente de inicio de sesión
  },
  {
    ruta: "registro",
    componente: RegistrarComponente
  }
]

@NgModule({
  importaciones: [RouterModule.forChild(rutas)],
  exportaciones: [Módulo de enrutador]
})
export class UserRoutingModule {}

5. Asociar el módulo de enrutamiento de usuario al módulo de enrutamiento principal

// app-routing.module.ts
rutas constantes: Rutas = [
  {
    ruta: "usuario",
    loadChildren: () => importar("./usuario/usuario.module").luego(m => m.UserModule)
  }
]

<a routerLink="/user/login">Iniciar sesión</a>

en el componente de navegación.

<a routerLink="/user/register">Registrarse</a>

Guardia de ruta

El guardia de ruta le indica a la ruta si está permitida la navegación hacia la ruta solicitada.

Los métodos de protección de ruta pueden devolver boolean , Observable <boolean> o Promise <boolean> , que se resuelven en un valor booleano en algún momento en el futuro.

1. CanActivate

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

CanActivate为接口y la clase de protección de ruta debe implementar esta interfaz. Esta interfaz estipula que la clase debe tener un método canActivate, que determina si se permite el acceso a la ruta de destino.

Una ruta puede aplicar多个守卫. Si se permiten todos los métodos de protección, se permite el acceso a la ruta. Si no se permite un método de protección, no se permite el acceso a la ruta.

Crear guardias de ruta: ng g guard guards/auth

import { Injectable } from "@angular/core"
importar {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router} desde "@angular/router"
importar {Observable} desde "rxjs"

@Inyectable({
  proporcionado en: "raíz"
})
la clase de exportación AuthGuard implementa CanActivate {
  constructor(enrutador privado: enrutador) {}
  canActivate(): booleano | Árbol de URL {
    // Se utiliza para implementar el retorno de salto this.router.createUrlTree(["/user/login"])
    // Deshabilitar el acceso a la ruta de destino devuelve falso
    //Permitir el acceso a la ruta de destino devuelve verdadero
  }
}

{
  ruta: "acerca de",
  componente: Acerca del componente,
  puedeActivar: [AuthGuard]
}

2. CanActivateChild

comprueba si el usuario puede acceder a una determinada subruta.

Crear una ruta guardia: ng g guard guards/admin Nota: Para seleccionar CanActivateChild, mueva la flecha a esta opción y toque el espacio para confirmar la selección.

importar {Inyectable} desde "@angular/core"
importar {CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree} desde "@angular/router"
importar {Observable} desde "rxjs"

@Inyectable({
  proporcionado en: "raíz"
})
clase de exportación AdminGuard implementa CanActivateChild {
  canActivateChild(): booleano | Árbol de URL {
    devolver verdadero
  }
}

{
  ruta: "acerca de",
  componente: Acerca del componente,
  canActivateChild: [AdminGuard],
  niños: [
    {
      ruta: "presentar",
      componente: IntroducirComponente
    }
  ]
}

3. CanDeactivate

comprueba si el usuario puede salir de la ruta.

Por ejemplo, si el contenido ingresado por el usuario en el formulario no se guarda y el usuario quiere abandonar la ruta, se puede llamar al guardia para avisarle.

importar {Inyectable} desde "@angular/core"
importar {
  puede desactivar,
  Instantánea de ruta activada,
  Instantánea del estado del enrutador,
  Árbol de URL
} de "@angular/router"
importar {Observable} desde "rxjs"

interfaz de exportación CanComponentLeave {
  canLeave: () => booleano
}

@Inyectable({
  proporcionado en: "raíz"
})
la clase de exportación UnsaveGuard implementa CanDeactivate<CanComponentLeave> {
  canDeactivate(componente: CanComponentLeave): booleano {
    si (componente.canLeave()) {
      devolver verdadero
    }
    devolver falso
  }
}

{
  camino: "",
  componente: componente de inicio,
  canDeactivate: [UnsaveGuard]
}

importar {CanComponentLeave} desde "src/app/guards/unsave.guard"

clase de exportación HomeComponent implementa CanComponentLeave {
  miForma: GrupoForm = nuevo GrupoForm({
    nombre de usuario: nuevo FormControl()
  })
  canLeave(): booleano {
    si (este.miformulario.sucio) {
      if (window.confirm("Hay datos que no se han guardado, ¿estás seguro de que quieres salir?")) {
        devolver verdadero
      } demás {
        devolver falso
      }
    }
    devolver verdadero
  }

4. Resolve

le permite obtener datos antes de ingresar la ruta y luego ingresar la ruta una vez completada la adquisición de datos.

ng g resolver <name>

importar {Inyectable} de "@angular/core"
importar {Resolver} desde "@angular/router"

tipo returnType = Promesa<{ nombre: cadena }>

@Inyectable({
  proporcionado en: "raíz"
})
clase de exportación ResolveGuard implementa Resolve<returnType> {
  resolver(): tipo de retorno {
    devolver nueva Promesa (función (resolver) {
      setTimeout(() => {
        resolver ({ nombre: "Zhang San" })
      }, 2000)
    })
  }
}

{
   camino: "",
   componente: componente de inicio,
   resolver: {
     usuario:ResolveGuard
   }
}

exportar clase HomeComponent {
  constructor (ruta privada: ActivatedRoute) {}
  ngOnInit(): nulo {
    console.log(esta.ruta.instantánea.datos.usuario)
  }
}