Angular中组件内渲染另一组件的最佳实践（含Angular 7场景）

嘿，我来帮你梳理这两个Angular组件相关的问题，都是日常开发中很常见的场景：

结合Angular的设计理念，这里有几个核心的最佳实践：

• 保持组件独立与低耦合：被嵌入的子组件应该是职责单一的独立单元，只通过@Input()接收外部数据，@Output()向外触发事件，不依赖父组件的内部状态或逻辑，这样不管嵌入到哪里都能正常工作。
• 静态场景用组件选择器直接嵌入：这是最直观也最常用的方式，直接在父组件的HTML模板里写入子组件的选择器（比如<app-child></app-child>），适合确定需要固定渲染子组件的场景。
• 动态场景用动态组件加载：如果需要根据条件切换不同组件，或者组件是懒加载的，可以借助ViewContainerRef和ComponentFactoryResolver来动态创建组件，不过这种适合复杂业务场景，普通静态嵌入没必要折腾。
• 用内容投影增强通用性：如果子组件需要接收父组件传递的自定义内容片段，就用<ng-content>实现内容投影，让父组件能灵活传入内容，让子组件更通用。
• 遵循单一职责原则：每个组件只专注自己的业务，父组件只负责协调子组件之间的交互，不要让子组件直接操作父组件的DOM或状态，通过输入输出接口完成通信。

你这个场景刚好是上面最佳实践的典型应用，完全可以做到不改动新旧组件的核心逻辑，步骤非常清晰：

1. 确保新组件的独立性：你已经用ng g c mynewcomp创建了组件，而且它自己能处理后端数据获取和渲染，这已经符合独立组件的要求，千万别修改它的内部逻辑，保持它能独立运行。
2. 在现有组件模板中嵌入新组件：打开现有组件的HTML文件，在旧内容的末尾（也就是你想要显示新组件的位置），直接添加新组件的选择器就行。比如你的新组件选择器是app-mynewcomp，就这么写：

<!-- 这是现有组件的原有内容 -->
<div class="old-content">
  <!-- 旧组件的HTML代码 -->
</div>

<!-- 嵌入新组件，放在旧内容下方 -->
<app-mynewcomp></app-mynewcomp>

3. 检查模块声明（自动完成无需手动改）：用Angular CLI创建的组件会自动在所属模块中声明，所以你不需要手动修改@NgModule的declarations数组，除非新组件在另一个独立模块里，那你需要把新组件所在的模块导入到现有组件的模块中，或者把新组件导出供其他模块使用。
4. 后续扩展（如果需要）：如果之后要给新组件传递数据或者监听它的事件，只需要在新组件里加@Input()和@Output()，完全不用改动旧组件的核心逻辑。比如：
   • 传数据给新组件：

     <app-mynewcomp [userInfo]="currentUser"></app-mynewcomp>
     

   • 监听新组件的事件：

     <app-mynewcomp (dataLoaded)="onNewDataLoaded($event)"></app-mynewcomp>
     

这样操作后，新旧组件完全解耦，旧组件的内容正常显示，新组件自己处理自己的逻辑，双方互不影响，完美符合你的需求。

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