Angular 17独立组件：嵌套组件的实现方法

从Angular 12迁移到17，核心变化之一就是独立组件（standalone components）替代了传统NgModule的部分功能。要嵌套组件，核心思路是在父组件的依赖列表中明确导入子组件，不用再把组件加到NgModule的declarations里。以下是两种常见场景的实现方式：

场景1：父组件也是独立组件（Angular 17默认项目结构） #

1. 创建独立子组件 #

子组件需要标记standalone: true，示例代码：

// child.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  standalone: true, // 声明为独立组件
  template: `<p>我是嵌套的子组件内容</p>`,
})
export class ChildComponent {}

2. 在父组件中导入并使用子组件 #

父组件同样是独立组件，需要在imports数组中导入子组件，然后在模板里直接用子组件的selector标签：

// app.component.ts（主组件）
import { Component } from '@angular/core';
import { ChildComponent } from './child/child.component'; // 导入子组件

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChildComponent], // 注册子组件到父组件的依赖中
  template: `
    <h2>主组件内容</h2>
    <app-child></app-child> <!-- 直接嵌套子组件 -->
  `,
})
export class AppComponent {}

场景2：父组件基于传统NgModule（迁移过来的旧项目） #

如果项目还保留着NgModule结构，要嵌套独立子组件，只需要把独立组件加到NgModule的imports数组中即可：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChildComponent } from './child/child.component'; // 导入独立子组件

@NgModule({
  declarations: [AppComponent], // 父组件仍在declarations中
  imports: [BrowserModule, ChildComponent], // 把独立子组件加到imports
  bootstrap: [AppComponent],
})
export class AppModule {}

之后在父组件的模板里，同样直接使用<app-child>标签就能嵌套展示。

关键注意点 #

• 独立组件的所有依赖（包括其他组件、指令、管道）都必须在自身的imports数组中声明，不能依赖NgModule的全局注册
• 如果子组件还依赖其他独立组件/第三方库，也要在子组件的imports里导入对应的模块或组件
• 新建独立组件时，Angular CLI默认就是独立模式，执行ng g c child即可生成，无需额外加--standalone参数

内容的提问来源于stack exchange，提问作者Subhadip Nayek