Angular Learning spricht über eigenständige Komponenten (Standalone Component)

Dieser Artikel hilft Ihnen dabei, Angular weiter zu lernen und die eigenständige Komponente (Standalone Component) inAngularkurz zu verstehen.

Ein aufregendes Feature von Angular 14 ist, dass die eigenständige Komponente von Angular endlich da ist. [Verwandte Tutorial-Empfehlung: „Angular-Tutorial“]

In Angular 14 können Entwickler versuchen, unabhängige Komponenten zu verwenden, um verschiedene Komponenten zu entwickeln. Es ist jedoch zu beachten, dass die API unabhängiger Angular-Komponenten immer noch nicht stabil ist und dies möglicherweise der Fall ist Es kann in Zukunft zu destruktiven Updates kommen, daher nicht für den Einsatz in Produktionsumgebungen empfohlen.

Grundlegende Verwendung

angular.io/guide/stand…

standalone ist eine neue Funktion, die von Angular14 eingeführt wurde.

Es kann dazu führen, dass Ihr Root-Modul AppModule nicht so aufgebläht wird.

Alle Komponenten/Pipes/Anweisungen werden in die entsprechenden Komponenten eingeführt, wenn sie verwendet werden. Dies ist beispielsweise die vorherige Schreibmethode. Wir deklarieren einenFußzeile Komponente

Dann importieren Sie diese Komponente in das verwendeteModuleFooter组件

然后在使用的Module中导入这个组件

import { Component } from '@angular/core'; @Component({ selector: 'app-footer', template: `  `, }) 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

import { Component } from '@angular/core'; @Component({ selector: 'app-footer', // 将该组件声明成独立组件 standalone: true, template: `  `, }) 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: ``, }) export class WelcomeComponent {}

Footer-Komponente wird in diese umgewandelt

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 {}

Das obige ist der detaillierte Inhalt vonAngular Learning spricht über eigenständige Komponenten (Standalone Component). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!