A medida que aumenta la demanda, las funciones del proyecto se vuelven más complejas. En este momento, necesitas modularizar el proyecto y empaquetar componentes, instrucciones y pipelines en bloques funcionales cohesivos, lo cual es perfecto para explorar subrutas y cargas perezosas de módulos en Angular4.
En el desarrollo anterior, se implementó una función de enrutamiento sencilla en el módulo raíz, que puede resumirse en los siguientes tres pasos:
1、在app.module.ts文件中加载路由库，并且在@NgModule中引入RouterModule.forRoot方法，其中，appRoutes是路由数组，它定义了具体的路由规则。
2. Añadir una barra de navegación al componente de shell, donde el comando routerLink apunta al destino de la ruta, y routerLinkActive añade estilo css a la etiqueta seleccionada
3. Añadir un comando router-outlet a la plantilla del componente de la carcasa, y la vista se mostrará allí
Ahora quiero implementar subrutas y carga perezosa de módulos sobre esta base.
RouterModule.forRoot() y RouterModule.forChild()
El objeto RouterModule proporciona dos métodos estáticos: forRoot() y forChild() para configurar la información de enrutamiento.
El método RouterModule.forRoot() se utiliza para definir la información principal de enrutamiento en el módulo principal, y RouterModule.forChild() es similar al método Router.forRoot(), pero solo puede aplicarse en módulos de características.
Es decir, forRoot() se usa en el módulo raíz y forChild() en el submódulo.
Su hijo Lu Ru
Supongamos que hay dos páginas bajo nuestra página de configuración /configuración, /configuración/perfil y /configuración/contraseña, que representan respectivamente la página de perfil y la página de cambio de contraseña. estableciendo como un bloque de funciones separado, que puede encapsularse en un módulo de características. Tiene sus propias rutas independientes, y las rutas para las páginas de perfil y contraseña pueden configurarse como subrutas.
En el módulo SettingsModule usamos el método forChild(), porque SettingsModule no es el módulo principal de nuestra aplicación.
Otra diferencia importante es que establecemos el camino principal del módulo SettingsModule en un camino vacío (''). Porque si configuramos la ruta en /settings, coincidirá con /settings/settings. Al especificar una ruta vacía, coincide con la ruta /settings.
Carga perezosa: loadChildren
Configura la información de enrutamiento del módulo de configuración en el módulo raíz AppModule:
Aquí se utiliza la propiedad LoadChildren con carga perezosa. En lugar de importar el SettingsModule al AppModule, la propiedad loadChildren indica a la ruta Angular que cargue el módulo SettingsModule según la ruta configurada por la propiedad loadChildren. Esta es la aplicación específica de la función de carga perezosa del módulo: cuando el usuario accede a la ruta /settings/**, se cargará el módulo SettingsModule correspondiente, lo que reduce el tamaño del recurso cargado cuando la aplicación inicia.
El valor de la propiedad de loadChildren consta de tres partes:
Se requieren rutas relativas para importar módulos
#分隔符
Exportar el nombre de la clase de módulo
Módulo CommonModule
Mencioné que quería introducir el módulo CommonModule en el módulo de funcionalidad, pero al principio no me di cuenta de que quería hacerlo en el módulo de funcionalidad, y como resultado, el error de página se reportó durante el enrutamiento:
core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Template parse errors:
No se puede vincular a 'ngClass' porque no es una propiedad conocida de 'div'.
No se puede asignar a 'ngForOf' porque no es una propiedad conocida de 'p'.
Binding de propiedades ngForOf no se usa por ninguna directiva en una plantilla incrustada. Asegúrate de que el nombre de la propiedad esté correctamente escrito y que todas las directivas estén listadas en las "@NgModule.declarations".
No se puede vincular a 'ngIf' porque no es una propiedad conocida de 'div'.
......
Después de comprobarlo durante mucho tiempo, descubrí que era porque no introduje CommonModule en el módulo de funcionalidad, y tras introducirlo, estos errores desaparecieron.
CommonModule proporciona muchas instrucciones comúnmente utilizadas en aplicaciones, incluyendo NgIf y NgFor. Más precisamente, directivas como NgIf se declaran en el CommonModule desde @angular/common.
Importamos el módulo BrowserModule en el módulo raíz AppModule, que importó el CommonModule y lo reexportamos. El resultado final es que, mientras importes el BrowserModule, recibirás automáticamente las instrucciones en el CommonModule.
Importar un BrowserModule hace que todos los componentes, directivas y pipelines expuestos por el módulo estén disponibles directamente en cualquier plantilla de componente bajo el AppModule sin pasos adicionales tediosos. Pero no importes el BrowserModule a ningún otro módulo. Los módulos de características y los módulos de carga perezosa deberían importarse a CommonModule en su lugar. No requieren reinicializar el proveedor completo a nivel de aplicación. Si importas un BrowserModule en un módulo de carga perezosa, Angular lanza un error.
Estos son algunos de los problemas y resúmenes que he encontrado en los últimos dos días usando subrutas angulares y cargas perezosas.
|
Publicado en 13/6/2019 13:13:10
|
|
|
|
