change - page title angular 4

Enrutamiento entre módulos en Angular 2

Question

Estoy escribiendo una aplicación donde todas las funciones tienen su propio módulo (una función podría ser una página o una parte de una página). Esto se debe a que queremos que todas las funciones tengan su propia lógica de dominio, servicios, directivas y componentes, es decir, en el módulo del panel de control obtuvimos un widget de ChartComponent que no quiero exponer a otras vistas como inicio de sesión o perfil.

El problema es que cuando se trabaja con enrutamiento en Angular 2, siempre se enruta a un componente en particular, no a un módulo.

En nuestro caso, para configurar una ruta para la ruta: componente ''/ dashboard'': DashboardComponent debemos declarar DashboardComponent en app.module.ts, y eso está bien, pero como todavía estamos en el módulo app.module, nuestro CharComponent es no está expuesto y no se procesará en nuestro DashboardComponent, ya que está declarado en dashboard.module.ts y no app.module.ts.

Si declaramos ChartComponent en app.module.ts, está funcionando como debería pero perdimos la arquitectura de nuestra aplicación.

La estructura de archivos para la aplicación es algo como esto:

└─ src/
   └─ app/
      ├─ app.module.ts
      ├─ app.component.ts
      ├─ app.routing.ts
      ├─ profile/
      |  ├─ profile.module.ts
      |  └─ profile.component.ts
      ├─ login/
      |  ├─ login.module.ts
      |  └─ login.component.ts
      └─ dashboard/
         ├─ dashboard.module.ts
         └─ dashboard.component.ts
            └─ chart/
               └─ chart.component.ts

Answer 1

Aunque esa lógica es buena, pondría todos los derechos en un módulo del componente de administración de cuentas para futuras funciones de activación y desactivación de las funciones, mientras que usted no desea que sus usuarios tengan todos los derechos que desee para actualizar una cuenta de usuario en el futuro. Amplíe la capacidad y prevea que le ahorrará tiempo de la codificación futura si su sistema está realmente interesado en esa lógica.

Answer 2

No es necesario importar componentes al módulo principal (aplicación),

Si está cargando rutas de forma perezosa, simplemente puede definir la ruta como a continuación,

// In app module route
{
 path: ''dashboard'',
 loadChildren: ''app/dashboard.module#DashboardModule''
}

// in dashboard module
const dashboardRoutes: Routes = [
  { path: '''',  component: DashboardComponent }
];

export const dashboardRouting = RouterModule.forChild(dashboardRoutes);

@NgModule({
  imports: [
   dashboardRouting
  ],
  declarations: [
    DashboardComponent
  ]
})
export class DashboardModule {
}

O

Solo puede importar el DashboardModule en el módulo principal y funcionará si las rutas no están cargadas perezosamente.

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    DashboardModule,
    routing
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    appRoutingProviders
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

¡¡Espero que esto ayude!!

Answer 3

Resulta que la carga lenta no funcionó correctamente en RC5, solo se actualizó a RC6 y todo funcionó.