L'apprentissage angulaire parle de composants autonomes (Standalone Component)-js tutoriel-php.cn

L'apprentissage angulaire parle de composants autonomes (Standalone Component)

青灯夜游

Libérer： 2022-12-19 19:24:47

avant

3000 Les gens l'ont consulté

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 !

L'apprentissage angulaire parle de composants autonomes (Standalone Component)

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.

Utilisation de base

angular.io/guide/stand…

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 &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-footer&#39;,
  template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `,
})
export class FooterComponent {}

Copier après la connexion

import { NgModule } from &#39;@angular/core&#39;;
import { CommonModule } from &#39;@angular/common&#39;;
import { FooterComponent } from &#39;./footer.component&#39;;

@NgModule({
  declarations: [HomeComponent, FooterComponent],
  exports: [],
  imports: [CommonModule],
})
export class AppModuleModule {}

Copier après la connexion

这种写法导致我们始终无法摆脱 NgModule

但其实我们的意图就是在 AppComponent 中使用 FooterComponent

换成 React 中的写法其实会更便于管理和理解

用上我们的新特性 standalone

Ensuite importez ce composant dans le Module utilisé

import { Component } from &#39;@angular/core&#39;;

@Component({
  selector: &#39;app-footer&#39;,
  // 将该组件声明成独立组件
  standalone: true,
  template: ` <footer class="dark:bg-gray-800 dark:text-gray-50">Footer</footer> `,
})
export class FooterComponent {}

Copier après la connexion

import { Component } from &#39;@angular/core&#39;;

import { FooterComponent } from &#39;@components/footer/footer.component&#39;;

@Component({
  selector: &#39;app-home&#39;,
  standalone: true,
  // 声明需要使用的 component / pipe / directive 但是它们也必须都是独立组件
  imports: [FooterComponent],
  template: `<app-footer></app-footer>`,
})
export class WelcomeComponent {}

Copier après la connexion

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éhension

Utilisation us La nouvelle fonctionnalité de standalone

Le composant Footer est transformé en ceci 🎜

import { NgModule } from &#39;@angular/core&#39;;
import { RouterModule, Routes } from &#39;@angular/router&#39;;

import { CustomPreloadingStrategy } from &#39;@views/basic-syntax/router/customPreloadingStrategy&#39;;

const routes: Routes = [
  {
    path: &#39;home&#39;,
    // 之前想要实现懒加载 这里必须是一个NgModule 现在使用独立组件也可以 并且更加简洁
    loadComponent: () => import(&#39;@views/home/home.component&#39;).then((mod) => mod.HomeComponent),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Copier après la connexion

🎜 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!