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ó.