Une brève analyse des composants indépendants dans Angular et voir comment les utiliser

L’une des fonctionnalités intéressantes d’Angular 14 est que les composants autonomes d’Angular sont enfin là.

Dans Angular 14, les développeurs peuvent essayer d'utiliser des composants indépendants pour développer divers composants, mais il convient de noter que l'API des composants indépendants Angular n'est toujours pas stable et qu'il pourrait y avoir des mises à jour destructrices à l'avenir, ce n'est donc pas recommandé pour utilisation dans un environnement de production. [Recommandation du didacticiel connexe : "Tutoriel angulaire"]

Comment créer un composant indépendant

Pour les composants existants, nous pouvons ajouter standalone: ​​​​​​true à @Component() , puis nous pouvons utiliser imports directement sans @NgModule() Importer d'autres modules. . Si vous créez un nouveau composant, vous pouvez utiliser ng generate component <name> --standalone pour créer directement un composant indépendant, par exemple :

ng generate composant bouton-list --standalone

@Component({
  sélecteur : 'app-button-list',  
  autonome : vrai,  
  importations : [
    Module commun,
  ],  
  templateUrl : './button-list.component.html',  
  styleUrls : ['./button-list.component.scss']
})
La classe d'exportation ButtonListComponent implémente OnInit

importe les modules existants dans des composants indépendants.

Nous pouvons ajouter des modules existants dans imports , en prenant MatButtonModule comme exemple :

importations : [
    Module commun,
    MatButtonModule,
],

afin que nous puissions utiliser le composant mat-button de MatButtonModule dans ButtonListComponent :

<button mat-button>Basic</button>
<button mat-button color="primary">Primaire</button>
<button mat-button color="accent">Accent</button>
<button mat-button color="warn">Avertir</button>
<bouton mat-bouton désactivé>Désactivé</bouton>
<a mat-button href="https://damingerdai.github.io" target="_blank">Lien</a>

Rendu :

pour démarrer une application Angular à l'aide de composants indépendants

consiste à définir AppComponent en tant que composant indépendant :

@Component({
  sélecteur : 'app-root',  
  URL du modèle : './app.component.html',  
  styleUrls : ['./app.component.scss'],  
  autonome : vrai,
})
export class AppComponent {

La deuxième étape consiste à ajouter les modules importés dans les importations de AppModule aux importations de AppComponent , mais il existe deux exceptions de module : BrowserModule et BrowserAnimationsModule .

S'il est importé, cela peut causer des problèmes : ** BrowserModule a déjà été chargé. Si vous avez besoin d'accéder à des directives communes telles que NgIf et NgFor, importez plutôt le CommonModule . ** :

La troisième étape consiste à supprimer le fichier app.module.ts .

La dernière étape consiste à importer dans main.ts :

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

remplacé par :

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

De cette façon, nous pouvons utiliser des composants indépendants pour démarrer des composants angulaires.

Configurez le routage pour les composants indépendants.

J'ai ici trois composants indépendants : HomeComponent , ButtonListComponent et ChipListComponent ,

puis créez l'objet ROUTES const ROUTES dans main.ts

 : Route[] = [
  {
      chemin: '',    
      pathMatch : 'complet',    
      redirigerVers : 'accueil'
  },
  {
      chemin : 'maison',    
      composant:ComposantAccueil
  },
  {
      chemin : 'bouton',    
      composant de chargement : () =>
            import('./app/button-list/button-list.component').then(
                    (mod) => mod.ButtonListComponent
            ),
  },
  {
      chemin : 'puce',    
      composant de chargement : () =>  
          import('./app/chip-list/chip-list.component').then(
                  (mod) => mod.ChipListComponent
          ),
  },
];

Parmi eux, ButtonListComponent et ChipListComponent utilisent loadComponent pour implémenter le chargement paresseux des routes.

Utilisez ensuite providers pour enregistrer RouterModule dans le deuxième paramètre de bootstrapApplication .

bootstrapApplication (AppComponent, {
  fournisseurs : [
    importProvidersFrom(RouterModule.forRoot([...ROUTES])),
  ],
}).catch(err => console.error(err));

Rendu :

Configuration de l'injection de dépendances

Lorsque nous souhaitons démarrer une application Angular, nous devrons peut-être injecter certaines valeurs ou services. Dans bootstrapApplication , nous pouvons enregistrer des valeurs ou des services via providers .

Par exemple, j'ai une URL pour obtenir des images, qui doit être injectée dans PhotoService :

bootstrapApplication(AppComponent, {
  fournisseurs : [
    {
          fournir : 'photoUrl',      
          useValue : 'https://picsum.photos',
    },
    {provide : PhotosService, useClass : PhotosService },
    importProvidersFrom(RouterModule.forRoot([...ROUTES])),
    importProvidersFrom(HttpClientModule)
  ],
})

Le code PhotoService est le suivant :

@Injectable()export class PhotosService {
  constructeur(
    @Inject('photoUrl') photoUrl privée : chaîne,
    http privé : HttpClient ) { }

  public getPhotoUrl(i: nombre): chaîne {
      return `${this.photoUrl}/200/300?random=${i}` ;
  }
}

Code source Code source

utilisé dans cet article : https://github.com/damingerdai/angular-standalone-components-app

Démo en ligne : https://damingerdai.github.io/angular-standalone-components-app/Texte

original Adresse : https://juejin.cn/post/7107224235914821662