Angular组件能否在app.component之外的其他组件中复用？

嘿，我懂你现在的困扰——你能在app.component.html里正常用<app-mycomponent>，但放到通过<router-outlet>渲染的组件里就不行了，对吧？这其实是Angular模块作用域和组件声明导出的问题，咱们一步步解决：

1. 确保组件在模块中正确声明并导出 #

Angular的组件是模块级别的，只有当组件所在的模块把它导出，并且使用它的路由组件所在的模块导入了这个模块，才能跨模块使用组件：

• 如果你的MyComponent在AppModule里，一定要把它加到exports数组中：

  @NgModule({
    declarations: [AppComponent, MyComponent],
    exports: [MyComponent], // 这步是关键！不导出的话其他模块看不到它
    imports: [BrowserModule, AppRoutingModule],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 如果你的路由组件在独立的特性模块（比如UserModule、DashboardModule）里，需要在该特性模块的imports数组中导入包含MyComponent的模块（比如AppModule，或者更推荐的是专门的SharedModule）。

2. 检查ng-content的使用方式 #

你提到用ng-content把组件注入到app.component，如果MyComponent本身依赖ng-content插槽，那在路由组件里使用时，要记得传入对应的内容，否则组件可能显示异常：

<!-- 在路由组件的模板中 -->
<app-mycomponent>
  <!-- 这里要传入ng-content需要的内容，比如文本、其他组件 -->
  <span>我是路由组件里传给MyComponent的内容</span>
</app-mycomponent>

如果你的目标是让MyComponent成为全局通用组件（比如导航栏），其实不需要在每个路由组件里手动添加——直接把它放在app.component.html中，让路由内容通过<router-outlet>渲染在它的下方或指定区域即可。但如果确实需要在路由组件内部使用，那模块的导出/导入规则依然是核心。

3. 确认组件selector的正确性 #

最后再检查一遍MyComponent的@Component装饰器里的selector，确保和你在模板里用的<app-mycomponent>完全一致，没有拼写错误：

@Component({
  selector: 'app-mycomponent', // 必须和模板中的标签名完全匹配
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.css']
})
export class MyComponent { }

总结一下：只要搞定模块之间的依赖关系（导出+导入），你就能在任何通过<router-outlet>渲染的组件里，像在app.component中一样正常使用app-mycomponent了。

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