Angular中如何将非独立组件导入独立组件 14+

Question

我想知道如何将非独立组件导入独立组件，因为非独立组件是在 ngModule 中声明的。

Answer 1

迁移文档中有一部分是关于这个确切用例的： Using existing NgModules in a standalone component 。

在编写独立组件时，您可能希望在组件模板中使用其他组件、指令或管道。 其中一些依赖项可能不会被标记为独立的，而是由现有的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 库的现有生态系统。

---

如果您有StandaloneComponent和NonStandaloneComponent （在NonStandaloneModule中声明并从中导出），那么您将在StandaloneComponent的组件声明中使用imports字段：

import { Component } from '@angular/core';
import { NonStandaloneModule } from '...';

@Component({
  selector: 'app-standalone',
  standalone: true,
  imports: [NonStandaloneModule], // Declares and exports NonStandaloneComponent
  template: `<app-non-standalone></app-non-standalone>` // Use imported as normal
})
export class StandaloneComponent {}

这是一个 StackBlitz ，因此您可以尝试一下这个想法。

Answer 2

我很高兴您使用与在模块中使用的相同的声明配置：

@Component({
  selector: 'app-display',
  standalone: true,
  declarations: [notAStandAloneComponent],
  imports: [CommonModule],
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})