Angular5：从其他组件调用时选择器无法渲染组件模板

我之前也碰到过这种控制台没报错但组件死活不显示的情况，太磨人了！结合你的场景，给你几个针对性的排查和解决方向：

• 核对组件选择器的准确性
  先去ChartsComponent的@Component装饰器里确认selector字段是不是chart-data——别小看拼写，比如有没有把chart-data写成charts-data或者驼峰的chartData？HTML里调用的时候必须和组件定义的选择器完全匹配（注意Angular里选择器如果是驼峰命名，HTML里要转成短横线分隔，比如组件selector是chartData，HTML里就得写<chart-data>）。

• 确保组件被正确导入/声明到目标模块
  你的文件结构是app/charts/和app/entities/data/，大概率这两个组件属于不同的模块：

  1. 如果ChartsComponent在ChartsModule里，那DataComponent所在的DataModule（或者包含DataComponent的模块）必须导入ChartsModule；
  2. 同时要在ChartsModule的exports数组里添加ChartsComponent，不然其他模块无法使用这个组件；
  3. 如果两个组件在同一个模块里，那要确保ChartsComponent已经加到模块的declarations数组中。

• 检查组件是否依赖输入属性或条件渲染
  虽然ChartsComponent在独立路由里能正常显示，但路由场景下可能自动注入了必要的数据，而在DataComponent里调用时没传必填的输入属性：

  1. 查看ChartsComponent有没有@Input()装饰的属性，比如@Input() chartData: any;；
  2. 如果有，在data.component.html里调用时必须传入对应的属性，比如<chart-data [chartData]="yourData"></chart-data>；
  3. 另外检查ChartsComponent的模板里有没有*ngIf、*ngFor这类条件渲染指令，是不是因为缺少数据导致组件内容被隐藏了。

• 排查样式导致的隐藏问题
  有时候组件其实渲染了，但被样式藏起来了：

  1. 打开浏览器开发者工具，在Elements面板里搜索chart-data，看看这个元素是不是存在；
  2. 如果存在，检查它的样式（比如display: none、visibility: hidden、opacity: 0或者父容器的overflow: hidden）；
  3. 也可以检查ChartsComponent的宿主样式，比如:host { display: block; }有没有被覆盖或者没设置（默认组件宿主是inline元素，可能导致内容显示异常）。

• 验证变更检测策略（针对OnPush模式）
  如果ChartsComponent用了changeDetection: ChangeDetectionStrategy.OnPush：

  1. 确保传入的输入属性是引用类型且发生了引用变化（比如不要直接修改数组/对象的属性，而是生成新的数组/对象）；
  2. 或者在DataComponent里手动触发变更检测，比如注入ChangeDetectorRef后调用cdr.detectChanges()。

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