navigationend - title angular 6

angular2-¿Cómo funcionan las ''importaciones'' y ''exportaciones'' en los módulos Angular2?

Question

Soy completamente nuevo en Angular2 y ha sido muy difícil entender lo que está pasando con las importaciones y exportaciones de @NgModule en Angular2.

Tome el siguiente código, por ejemplo:

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

En la sección de importaciones, ¿qué estoy importando? El módulo enrutador, la función forChild () o el módulo devuelto por la función forChild ()? Cuál es ?

Además, cuando vuelvo a exportar RouterModule , la documentation dice lo siguiente:

Nuestro último paso es volver a exportar el RouterModule. Al volver a exportar el Módulo de enrutamiento, nuestro módulo de funciones se proporcionará con las Directivas de enrutador cuando se utilice nuestro Módulo de enrutamiento.

Entonces, ¿eso significa que cualquier módulo que importe el NgModule anterior, tendrá acceso a todo el código en el RouterModule?

Es como si escribiera un archivo de encabezado personalizado en C que incluya math.h, si ahora uso ese archivo de encabezado ya no necesito incluir math.h en mi programa por separado. ¿Es mi analogía correcta?

Alguien puede explicar los conceptos básicos aquí, para que no me quede perplejo cada vez que veo un nuevo código.

Answer 1

Desde los documentos de RouterModule :

• forRoot crea un módulo que contiene todas las directivas, las rutas proporcionadas y el servicio del enrutador.
• forChild crea un módulo que contiene todas las directivas y las rutas dadas, pero no incluye el servicio de enrutador .

Utiliza forRoot para configurar el enrutamiento de su módulo raíz y forChild para sus módulos de funciones.

No necesita el router service en los módulos de funciones porque solo necesita uno para su aplicación, que debe configurar en AppRoutingModule por convención (asumiendo que su módulo raíz se llama AppModule ).

Usando su fragmento de código como ejemplo:

    @NgModule({
      imports: [
        RouterModule.forChild(heroesRoutes)
      ],
      exports: [
        RouterModule
      ]
    })
   export class AppRoutingModule {}

RouterModule tiene algunas declaraciones como routerLink o routerLinkActive que pueden ser utilizadas por los componentes en AppModule .

Para que esas declaraciones estén disponibles en AppModule , puede importar RouterModule directamente en AppModule o hacerlo disponible a través de AppRoutingModule mediante la exportación.

Answer 2

La gran explicación y el ejemplo de router.forChild (ROUTES) (y Router en general) se pueden encontrar en youtube .

Es una charla de Victor Savkin, uno de los principales contribuyentes al enrutador angular.

Después de leer muchos tutoriales y SO respuestas sobre el enrutador, su charla me ayudó a resumirlo todo y ver cómo funciona en un ejemplo en vivo.

Nota: El enlace inicia el video a las 6:22, donde Victor explica la carga perezosa. Siéntase libre de comenzar desde el principio del video para obtener más detalles sobre cómo funciona el enrutador.

Answer 3

Si utiliza el componente <router-outlet> o las directivas routerLink o routerLinkActive , debe agregar el RouterModule de RouterModule a las imports: [] de cada módulo en el que desee usar cualquiera de estos.

Esto es lo mismo para cualquier directiva, componente o tubería. Angular solo crea una instancia de ellos en un módulo si son conocidos por una importación.

Si agrega un módulo a las imports: [] todas las directivas, componentes y tuberías enumeradas en las exportaciones estarán disponibles para el módulo de importación.

Un módulo también puede reexportar otros módulos, lo que hace que todas las directivas, componentes y canalizaciones exportadas de estos módulos estén disponibles para el módulo de importación.

Ver también

• https://angular.io/docs/ts/latest/guide/ngmodule.html
• https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html

Answer 4

Un módulo en Angular2 es muy similar a los módulos Angular1, que básicamente es un paquete que contiene todos los bits y piezas que tiene sentido enviarse juntos.

Por ejemplo, si tiene un LoginComponent que por alguna razón está conectado a un Servicio, que es LoginService, que realiza alguna solicitud http para obtener información del usuario, puede crear un LoginModule que envíe LoginComponent y LoginService todos juntos como LoginModule.

LoginService también podría usar algunas interfaces, por ejemplo, un UserInterface, que de nuevo, tendría sentido enviarse a LoginModule para el consumidor.

Entonces, si soy su cliente y voy a usar su funcionalidad general de inicio de sesión, ¡me facilitará mucho más la importación de su módulo de inicio de sesión y todas sus ventajas disponibles para mi AppComponent!

Por lo tanto, su clase LoginModule (que no es más que un simple archivo javascript y una función) debe exportar LoginModule para que yo lo use :).

LoginModule se vería así:

   @NgModule({
      declaration:[LoginComponent , LogoutComponent], 
      exports: [
        LoginComponent , LogoutComponent
      ],
      providers:[LoginService]
    })
    export class LoginModule{

    }

Así que en mi AppModule, importaría su LoginModule.

@NgModule({
  imports: [
    LoginModule,
    RouterModule.forChild(heroesRoutes) // another imported module that I need beside the Login
  ]
})

PERO :

Si conozco su código y no quiero ninguna de sus funciones, componentes, clases y cosas adicionales y solo necesito usar su LoginComponent, es posible que prefiera declarar que estoy usando LoginComponent y no quiero ¡importa tu LoginModule masivo!

@NgModule({
  declaration:[LoginComponent],
  imports: [
    RouterModule.forChild(heroesRoutes)
  ]
})

Esto solo funcionaría y solo si LoginComponent no tiene ninguna dependencia directa en LoginService, de lo contrario Angular se quejaría y diría:

**No Provider for LoginService**

Lo que en ese caso, si eres una persona ruda y aún no estás convencido de usar LoginModule, puedes ayudar a Angular y proporcionar el servicio de inicio de sesión como:

@NgModule({
  declaration:[LoginComponent],// declaring it 
  providers:[LoginService],// providing it
  imports: [
    RouterModule.forChild(heroesRoutes)
  ]
});

Por lo tanto, esto podría continuar y quizás le resulte más fácil simplemente importar todo el LoginModule y dejar que el propio Módulo haga todo el trabajo.

Eso es todo con LoginModule.

Ahora, para responder a tu pregunta sobre forChild .

El LoginModule puede querer hacer algunas cosas adicionales cuando le da clases que no siempre son necesarias, en ese caso usted podría haber mejorado el LoginModule y agregarle algo de azúcar.

@NgModule({
   declaration:[LoginComponent , LogoutComponent], 
   exports: [LoginComponent , LogoutComponent],
   providers:[LoginService]
})  
export class LoginModule{
  public static logAndLoadModule(message){
     console.log(''I first log and then give you my module'');
     return {
      ngModule: LoginModule
     }
  }
  public static alertAndLoadModule(message){
      alert(''I first alert and then give you my module'');
     return {
      ngModule: LoginModule
     }
  }
}

Lo que, en este caso, parece que el módulo puede registrar algo cuando comienza a darme su paquete. Así que podría usarlo así:

   @NgModule({
      imports: [
        LoginModule.logAndLoadModule(),
        RouterModule.forChild(heroesRoutes)
      ]
    })

¿No es logAndLoadModule tan similar a la función forChild de RouterModule?

Sí, lo es, todavía te da LoginModule pero también hace algo adicional.

Por lo tanto, aún puede importar LoginModule, pero también puede usar su alerta y registro.

ACTUALIZAR:

exportar clase LoginModule , significa, el archivo actual (probablemente login.module.ts o lo que sea) está exportando una clase llamada LoginModule que se puede importar desde otros archivos y no tiene nada que ver con Angular, esto es solo mecanografiado que compilará a javascript .

Donde como

  @NgModule({
      exports: [
        LoginModulesBrother
      ]
    })
  export class LoginModule{

  }

Arriba está Angular2, un lenguaje específico y significa que LoginModule también está exportando LoginModulesBrother, por lo que quienquiera que esté importando LoginModule, también tiene acceso a LoginModulesBrother.

Entonces, LoginModulesBrother, es otro módulo que probablemente se define en otro lugar como:

  @NgModule({
      // some other magic here 
  })
  export class LoginModulesBrother{

  }

Entonces, en general, importar y exportar una clase , lo que podría ser lo que sea (un módulo, un componente, una función simple o cualquier otra cosa) es solo una escritura de tipo, pero que la matriz de exportación e importación es solo un lenguaje específico Angular y no significa nada para la escritura de letra.