Usando módulos compartidos en angular

Crear un proyecto para implementar el módulo compartido. La guía anteriormente mencionada sobre la carga perezosa describía cómo crear un proyecto con un módulo de características. Utilizaremos esos mismos módulos y componentes en esta guía.

Un módulo compartido es un tipo de módulo de características. Cree un módulo compartido utilizando el siguiente código:

1$ ng g m compartido --routing

Shell

Has creado el Módulo Compartido. El módulo de características FirstModule fue construido como se describe en la guía anterior.

Ahora cree un componente compartido en el SharedModule y expórtelo desde el módulo compartido para que pueda utilizarlo directamente en otros módulos o componentes sin importar el componente compartido a otros módulos.

Cree un componente compartido utilizando el siguiente recorte:

1$ ng g c compartido/componentes/compartido --módulo compartido

Shell

Es hora de probar la funcionalidad. Usa @Input() para obtener un nombre dinámicamente y mostrarlo en el HTML del componente compartido.

shared.component.ts

12345678910111213import{Componente,OnInit,Input}de"@angular/núcleo";@Componente({ selector: "app-shared", plantillaUrl:"./componente.compartido. html", styleUrls:["./compartido.componente.scss"]})exportclassComponentescompartidosOnInit{ @Input() name:string;constructor(){}ngOnInit(){}}

ts

En el código anterior, se utiliza un decorativo @Input() para obtener un nombre del componente padre.

shared.component.html

1<span>;{{{{nombre}}</span>;

html

Como sabe, puede utilizar el componente si está registrado en el módulo. Pero para usar el SharedComponent, no lo importará en AppModule o FirstModule. Necesitas exportar SharedComponent desde ShareModule.

shared.module.ts

123456789101112importar{NgModule}de"@angular/núcleo";importar{CommonModule}de"@angular/común";importar{SharedRoutingModule}de"./módulo de enrutamiento compartido";importar{Componente compartido}de". /componentes/compartido/componente compartido";@NgModule({ declaraciones:[Componente Compartido], importa:[Módulo Común,Módulo de Enrutamiento Compartido], exporta:[Componente Compartido]})clase de exportaciónMódulo Compartido{}

ts

El fragmento anterior muestra que el componente compartido se ha exportado desde ShareModule.

En lugar de importar los componentes a los otros módulos, importa el Módulo Compartido a otros módulos. Cada componente registrado en el SharedModule puede ser utilizado por otros módulos.

Haga cambios en app.component.html de la guía anterior.

app.component.html

12345678<div><app-sharedname="App"/app-shared;</div;;div;;a[routerLink]="[$0027/primer$0027]";Ir al primero</a
html

Añada el SharedModule en la sección de importaciones del AppModule.

 app.module.ts 

1234567891011121314importar{BrowserModule}de"@angular/plataforma-browser";importar{NgModule}de"@angular/núcleo";importar{AppRoutingModule}de"./app-routing.module";importar{AppComponent}de"./app. component";import{SharedModule}from"./shared/shared.module";@NgModule({ declaraciones:[AppComponent], importa:[BrowserModule,AppRoutingModule,SharedModule], proveedores:[], bootstrap:[AppComponent]})exportclassAppModule{}
ts

Use la misma configuración en el FirstModule.

Haga los cambios en first.component.html.

first.component.html
1<app-sharedname="First"³;</app-shared;
html

Ahora importa el Módulo Compartido al Primer Módulo.

primero.módulo.ts
123456789101112importar{NgModule}de"@angular/núcleo";importar{CommonModule}de"@angular/común";importar{FirstRoutingModule}de"./primer-módulo de ruta";importar{PrimerComponente}de"./componentes/primero/primero. componente";importar{MóduloCompartido}de"../módulo.compartido";@NgModule({ declaraciones:[PrimerComponente], importa:[MóduloComún,PrimerMódulo de Enrutamiento,MóduloCompartido]})clase de exportaciónFirstModule{}
ts

Ha hecho todos los cambios necesarios para implementar los módulos compartidos. Ha utilizado un componente compartido sin declararlo en el módulo. Importe el SharedModule en cualquier módulo en el que necesite utilizar módulos o componentes compartidos.

Ejecute la aplicación, y podrá ver esta salida::

Como puedes ver en la imagen, App es el nombre que has pasado en el app.component.html. Significa que la aplicación está funcionando ahora.

Ahora haz clic en  Ir a la primera  . Esto te llevará al Primer Componente, donde has usado el Componente Compartido.

Después de hacer clic en él, verás esta salida: