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) in Angular kurz 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 einen Fußzeile Komponente

Dann importieren Sie diese Komponente in das verwendete ModuleFooter 组件

然后在使用的 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

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

Diese Schreibweise bedeutet, dass wir NgModule niemals loswerden können

Aber tatsächlich unser Die Absicht besteht darin, FooterComponent in AppComponent zu verwenden.

Der Wechsel zur Schreibmethode in React macht es tatsächlich einfacher zu verwalten und zu verstehen.

Verwenden Sie uns Die neue Funktion von standalone

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

Dann können wir sie zum Beispiel auf der Startseite so verwenden 🎜rrreee🎜Die unabhängige Komponente kann direkt für Lazy Loading verwendet werden. Ursprünglich mussten wir NgModule verwenden, um dies zu erreichen. 🎜rrreee🎜Weitere Programmierkenntnisse finden Sie unter: 🎜Programmierlehre🎜! ! 🎜

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!