Un breve análisis de componentes independientes en Angular y ver cómo usarlos

Una de las características interesantes de Angular 14 es que los componentes independientes de Angular finalmente están aquí.

En Angular 14, los desarrolladores pueden intentar usar componentes independientes para desarrollar varios componentes, pero vale la pena señalar que la API de los componentes independientes de Angular aún no es estable y puede haber algunas actualizaciones destructivas en el futuro, por lo que no se recomienda para uso en un entorno de producción. [Recomendación de tutorial relacionada: "tutorial angular"]

Cómo crear un componente independiente

Para los componentes existentes, podemos agregar standalone: ​​​​true a @Component() , y luego podemos usar imports directamente sin @NgModule() Importar otros módulos. . Si está creando un nuevo componente, puede usar ng generate component <name> --standalone para crear directamente un componente independiente, por ejemplo:

ng generate componente button-list --standalone

@Component({
  selector: 'lista-de-botones-de-aplicaciones',  
  independiente: verdadero,  
  importaciones: [
    módulo común,
  ],  
  URL de plantilla: './lista-de-botones.component.html',  
  styleUrls: ['./button-list.component.scss']
})
La clase de exportación ButtonListComponent implementa OnInit

importa módulos existentes en componentes independientes.

Podemos agregar módulos existentes en imports , tomando MatButtonModule como ejemplo:

imports: [
    módulo común,
    módulo matbutton,
],

para que podamos usar el componente mat-button de MatButtonModule en ButtonListComponent :

<button mat-button>Básico</button>
<button mat-button color="primary">Primario</button>
<button mat-button color="accent">Acento</button>
<botón mat-botón color="advertir">Advertir</botón>
<button mat-button discapacitado>Desactivado</button>
<a mat-button href="https://damingerdai.github.io" target="_blank">Enlace</a>

Representación:

para iniciar una aplicación Angular usando componentes independientes

es configurar AppComponent como un componente independiente:

@Component({
  selector: 'raíz de aplicación',  
  URL de plantilla: './app.component.html',  
  URL de estilo: ['./app.component.scss'],  
  independiente: verdadero,
})
export class AppComponent {

El segundo paso es agregar los módulos importados en las importaciones de AppModule a las importaciones de AppComponent , pero hay dos excepciones de módulo: BrowserModule y BrowserAnimationsModule .

Si se importa, puede causar problemas: ** BrowserModule ya se ha cargado. Si necesita acceso a directivas comunes como NgIf y NgFor, importe CommonModule .**:

El tercer paso es eliminar el archivo app.module.ts .

El último paso es importar en main.ts :

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
plataformaBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

cambiado a:

bootstrapApplication(AppComponent).catch(err => console.error(err));

de esta manera, podemos usar componentes independientes para iniciar componentes Angular.

Configure el enrutamiento para componentes independientes.

Tengo tres componentes independientes aquí: HomeComponent , ButtonListComponent y ChipListComponent ,

y luego cree el objeto ROUTES const ROUTES en main.ts

: Route[] = [.
  {
      camino: '',    
      pathMatch: 'completo',    
      redirigir a: 'casa'
  },
  {
      ruta: 'casa',    
      componente: InicioComponente
  },
  {
      ruta: 'botón',    
      cargarComponente: () =>
            importar('./app/lista-de-botones/lista-de-botones.component').luego(
                    (mod) => mod.ButtonListComponent
            ),
  },
  {
      ruta: 'chip',    
      cargarComponente: () =>  
          importar('./app/chip-list/chip-list.component').luego(
                  (mod) => mod.ChipListComponent
          ),
  },
];

Entre ellos, ButtonListComponent y ChipListComponent utilizan loadComponent para implementar la carga diferida de rutas.

Luego use providers para registrar RouterModule en el segundo parámetro de bootstrapApplication .

aplicación de arranque (componente de aplicación, {
  proveedores: [
    importProvidersFrom(RouterModule.forRoot([...RUTAS])),
  ],
}).catch(err => console.error(err));

Representación:

Configurar la inyección de dependencia

Cuando queremos iniciar una aplicación Angular, es posible que necesitemos inyectar algunos valores o servicios. En bootstrapApplication , podemos registrar valores o servicios a través de providers .

Por ejemplo, tengo una URL para obtener imágenes, que debo inyectar en PhotoService :

bootstrapApplication(AppComponent, {
  proveedores: [
    {
          proporcione: 'fotoUrl',      
          useValue: 'https://picsum.photos',
    },
    {proporcionar: PhotosService, useClass: PhotosService},
    importProvidersFrom(RouterModule.forRoot([...RUTAS])),
    importarProvidersFrom(HttpClientModule)
  ],
})

El código PhotoService es el siguiente:

@Injectable() export class PhotosService {
  constructor(
    @Inject('photoUrl') URL de foto privada: cadena,
    http privado: HttpClient ) { }

  getPhotoUrl público (i: número): cadena {
      return `${this.photoUrl}/200/300?random=${i}`;
  }
}

Código fuente

Código fuente utilizado en este artículo: https://github.com/damingerdai/angular-standalone-components-app

Demostración en línea: https://damingerdai.github.io/angular-standalone-components-app/Texto

original Dirección: https://juejin.cn/post/7107224235914821662