Angular 入门基础(第十一篇) 独立组件入门

用户3821865500480
396 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天。点击查看活动详情

在 v14 及更高版本中，独立组件提供了一种简化的方式来构建 Angular 应用程序。独立组件、指令和管道旨在通过减少对 NgModule 的需求来简化创作体验。现有应用程序可以选择性地以增量方式采用新的独立风格，而无需任何重大更改。

创建独立组件

standalone 标志和组件 imports 组件、指令和管道现在可以标记为 standalone: true。标记为独立的 Angular 类不需要在 NgModule 中声明（如果你尝试，Angular 编译器会报告错误）。

独立组件直接指定它们的依赖项，而不是通过 NgModule 获取它们。例如，如果 PhotoGalleryComponent 是独立组件，它可以直接导入另一个独立组件 ImageGridComponent ：

@Component({
  standalone: true,
  selector: 'photo-gallery',
  imports: [ImageGridComponent],
  template: `
    ... <image-grid [images]="imageList"></image-grid>
  `,
})
export class PhotoGalleryComponent {
  // component logic
}

imports 也可用于引用独立指令和管道。通过这种方式，可以编写独立组件，而无需创建 NgModule 来管理模板依赖项。

在独立组件中使用现有的 NgModules

编写独立组件时，你可能希望在组件的模板中使用其他组件、指令或管道。其中某些依赖项可能不会标记为独立，而是由现有的 NgModule 声明和导出。在这种情况下，你可以将 NgModule 直接导入到独立组件中：

@Component({
  standalone: true,
  selector: 'photo-gallery',
  // an existing module is imported directly into a standalone component
  imports: [MatButtonModule],
  template: `
    ...
    <button mat-button>Next Page</button>
  `,
})
export class PhotoGalleryComponent {
  // logic
}

你可以在模板中将独立组件与现有的基于 NgModule 的库或依赖项一起使用。独立组件可以充分利用现有的 Angular 库生态系统。

在基于 NgModule 的应用程序中使用独立组件

独立组件也可以导入到现有的基于 NgModules 的上下文中。这允许现有应用程序（今天使用 NgModules）逐步采用新的独立风格的组件。

你可以像导入 NgModule 一样导入独立组件（或指令或管道）- 使用 NgModule.imports ：

@NgModule({
  declarations: [AlbumComponent],
  exports: [AlbumComponent],
  imports: [PhotoGalleryComponent],
})
export class AlbumModule {}

使用独立组件引导应用程序

通过使用独立组件作为应用程序的根组件，可以在没有任何 NgModule 的情况下引导 Angular 应用程序。这是使用 bootstrapApplication API 来完成的：

// in the main.ts file
import {bootstrapApplication} from '@angular/platform-browser';
import {PhotoAppComponent} from './app/photo.app.component';

bootstrapApplication(PhotoAppComponent);

配置依赖注入

引导应用程序时，你通常希望配置 Angular 的依赖注入并提供配置值或服务以在整个应用程序中使用。你可以将这些作为提供者传递给 bootstrapApplication ：

bootstrapApplication(PhotoAppComponent, {
  providers: [
    {provide: BACKEND_URL, useValue: 'https://photoapp.looknongmodules.com/api'},
    // ...
  ]
});

独立的引导操作基于显式配置 Provider 列表以进行依赖注入。但是，现有的库可能依赖 NgModule 来配置 DI。例如，Angular 的路由器使用 RouterModule.forRoot() 帮助器在应用程序中设置路由。你可以通过 importProvidersFrom 实用程序在 bootstrapApplication 中使用这些现有的 NgModule ：

bootstrapApplication(PhotoAppComponent, {
  providers: [
    {provide: BACKEND_URL, useValue: 'https://photoapp.looknongmodules.com/api'},
    importProvidersFrom(
      RouterModule.forRoot([/* app routes */]),
    ),
    // ...
  ]
});
avatar
文章
阅读
粉丝