Angular 4组件嵌套插值表达式问题咨询

嘿，我之前开发Angular组件时也碰到过类似的嵌套内容渲染坑，咱们一步步来搞定它！

首先，你的Contentholder组件纯HTML/CSS实现容器，单独用没问题，但嵌套带插值表达式和翻译服务的内容就出问题，最常见的原因是组件没配置「内容投影（Content Projection）」——Angular不会自动把你嵌套在组件标签里的内容渲染出来，除非你明确告诉它要把这些内容放在哪里。

第一步：检查并添加<ng-content>标签 #

打开你的content-holder.component.html模板文件，看看里面有没有<ng-content>标签。如果没有，这就是问题根源！你需要在组件的模板容器中添加这个标签，用来接收外部嵌套的内容。

举个例子，假设你的Contentholder模板原本是这样的：

<!-- 错误示例：没有ng-content，嵌套内容无法渲染 -->
<div class="content-holder-styles">
  <!-- 只有固定样式，没有接收外部内容的入口 -->
</div>

修改成这样：

<!-- 正确示例：添加ng-content来接收嵌套内容 -->
<div class="content-holder-styles">
  <ng-content></ng-content> <!-- 外部嵌套的内容会被插入到这个位置 -->
</div>

添加之后再测试，嵌套的<div>内容应该就能正常显示了。

如果还是有问题？排查翻译服务和插值表达式 #

如果已经加了<ng-content>但内容还是不显示，那大概率是翻译服务的调用有问题：

• 先把插值表达式换成固定字符串测试，比如：

  <content-holder>
    <div>
      <h2>测试标题</h2>
      <p>测试副标题</p>
    </div>
  </content-holder>
  

  如果固定文本能显示，说明问题出在translationservice上：
  1. 确保translationservice已经在使用Contentholder的父组件中正确注入（比如在父组件的constructor里声明，或者在模块的providers中注册）。
  2. 检查getExpression方法的返回值：如果它返回的是Observable类型，你需要加上async管道才能在模板中显示，比如：

     <h2>{{ translationservice.getExpression("Kiosk.Markforgotten_Text") | async }}</h2>
     

  3. 确认getExpression方法能正确返回对应键值的字符串，可以在父组件的ngOnInit里打印一下返回值，看看是否正常：

     ngOnInit() {
       console.log(this.translationservice.getExpression("Kiosk.Markforgotten_Text"));
     }
     

总结 #

大部分情况下，只要给Contentholder组件的模板加上<ng-content>标签，就能解决嵌套内容不显示的问题。如果还有问题，再逐步排查翻译服务的注入和调用逻辑就好啦！

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