从Angular 1.5 ui-router到Angular 5：子组件导入方式咨询

嘿，刚好能帮你理清Angular 5里父子组件的正确用法，毕竟你刚从Angular 1.5的ui-router转过来，肯定会觉得模块这块有点陌生。先给你吃个定心丸：完全不需要把所有组件都塞进app.module.ts里！Angular 2+的模块系统就是用来帮你拆分和组织代码的，下面一步步给你讲清楚：

1. 子组件的核心规则：必须在NgModule中声明 #

不管是父子组件还是独立组件，Angular要求每个组件都得在某个NgModule的declarations数组里注册。但这个模块不一定是根模块AppModule——你可以根据功能拆分出「特性模块」（比如Heroes教程里的HeroesModule），把相关的组件都放在对应的特性模块里。

举个简单的例子：如果你的父组件ParentComponent和子组件ChildComponent是一组紧密相关的功能，你可以把它们都声明在同一个特性模块里，完全不用碰AppModule。

2. 同模块内父子组件的使用步骤 #

假设你用Angular CLI创建了这两个组件，并且都在AppModule里：

• 首先确认ChildComponent已经出现在AppModule的declarations里（CLI创建组件时会自动帮你加进去）：

@NgModule({
  declarations: [
    AppComponent,
    ParentComponent,
    ChildComponent // 子组件必须在这里声明
  ],
  imports: [BrowserModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 接下来直接在父组件的模板parent.component.html里使用子组件的选择器就行，和Angular 1.5里用组件指令的感觉差不多：

<!-- 父组件模板里直接用子组件 -->
<div class="parent-container">
  <app-child></app-child>
</div>

3. 跨模块使用子组件（更推荐的大型应用方式） #

如果你的应用比较复杂，像Heroes教程那样拆分了特性模块，那跨模块调用子组件的步骤是这样的：

1. 在子组件所在的特性模块里导出它：比如子组件ChildComponent在HeroesModule里，你需要把它加到模块的exports数组，这样其他模块才能访问到它：

// heroes.module.ts
@NgModule({
  declarations: [ChildComponent, HeroesComponent],
  exports: [ChildComponent] // 导出子组件，对外开放
})
export class HeroesModule { }

2. 在父组件所在的模块里导入特性模块：如果父组件在AppModule里，那就在AppModule的imports数组里加HeroesModule：

// app.module.ts
@NgModule({
  declarations: [AppComponent, ParentComponent],
  imports: [BrowserModule, HeroesModule], // 导入特性模块
  bootstrap: [AppComponent]
})
export class AppModule { }

做完这两步，父组件的模板里就能正常使用<app-child>了。

4. 和Angular 1.5 ui-router的对比 #

你之前在Angular 1.5里可能是通过路由配置绑定组件，或者直接在父模板里写组件指令。Angular 5的逻辑其实有相通之处，但核心差异在于模块的权限控制：组件默认只能在自己所在的模块里使用，要跨模块用必须显式导出和导入，这比Angular 1.x的全局注册更严谨，也更利于大型项目的维护。

总结一下关键要点：

• 不用把所有组件都堆在app.module.ts，按功能拆分特性模块更合理
• 同模块内的父子组件，只要子组件在模块声明里，父组件就能直接用
• 跨模块使用子组件，必须先在子组件模块导出，再在父组件模块导入对应特性模块

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