Maison > Article > interface Web > L'apprentissage angulaire parle de composants autonomes (Standalone Component)
Cet article vous aidera à continuer à apprendre Angular et à comprendre brièvement le composant autonome (Standalone Component) dans Angular J'espère qu'il vous sera utile !
Une fonctionnalité intéressante d'Angular 14 est que le composant autonome d'Angular est enfin là. [Recommandation de didacticiel connexe : "Tutoriel angulaire"]
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 il peut y avoir il y en aura dans le futur Mises à jour destructrices, donc déconseillées pour une utilisation dans les environnements de production.
standalone est une nouvelle fonctionnalité lancée par Angular14.
Cela peut rendre votre module racine AppModule moins volumineux
Tous les composants/pipes/directives sont introduits dans les composants correspondants lorsqu'ils sont utilisés
Par exemple, c'est la façon d'écrire précédente Nous déclarons un Footer.
composantFooter
组件
然后在使用的 Module
中导入这个组件
import { Component } from '@angular/core'; @Component({ selector: 'app-footer', template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `, }) export class FooterComponent {}
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FooterComponent } from './footer.component'; @NgModule({ declarations: [HomeComponent, FooterComponent], exports: [], imports: [CommonModule], }) export class AppModuleModule {}
这种写法导致我们始终无法摆脱 NgModule
但其实我们的意图就是在 AppComponent
中使用 FooterComponent
换成 React
中的写法 其实会更便于管理和理解
用上我们的新特性 standalone
Module
utiliséimport { Component } from '@angular/core'; @Component({ selector: 'app-footer', // 将该组件声明成独立组件 standalone: true, template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `, }) export class FooterComponent {}
import { Component } from '@angular/core'; import { FooterComponent } from '@components/footer/footer.component'; @Component({ selector: 'app-home', standalone: true, // 声明需要使用的 component / pipe / directive 但是它们也必须都是独立组件 imports: [FooterComponent], template: `<app-footer></app-footer>`, }) export class WelcomeComponent {}Cette façon d'écrire signifie qu'on ne pourra jamais se débarrasser de
NgModule
Mais en fait Notre intention est d'utiliser FooterComponent
dans AppComponent
Le passage à la méthode d'écriture dans React
facilitera en fait la gestion et la compréhensionUtilisation us La nouvelle fonctionnalité de standalone
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { CustomPreloadingStrategy } from '@views/basic-syntax/router/customPreloadingStrategy'; const routes: Routes = [ { path: 'home', // 之前想要实现懒加载 这里必须是一个NgModule 现在使用独立组件也可以 并且更加简洁 loadComponent: () => import('@views/home/home.component').then((mod) => mod.HomeComponent), }, ]; @NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })], exports: [RouterModule], }) export class AppRoutingModule {}🎜 Ensuite par exemple sur la page d'accueil on peut l'utiliser comme ceci 🎜rrreee🎜Le composant indépendant peut être directement utilisé pour du lazy chargement . À l'origine, nous devions utiliser NgModule pour y parvenir 🎜rrreee🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Enseignement de la programmation🎜 ! ! 🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!