Angular使用@Input传值时在ng-template上绑定parentData报未知属性错误

这个报错根本不是运行时抛出的，是Angular在模板编译的检查阶段就拦截了，和CX Outlet的渲染逻辑没有关系：

• 你现在写[parentData]="name"的标签是内置的ng-template，这个标签本身从来没有定义过叫parentData的输入属性
• parentData是你自己在NotificationComponent上加的@Input，但你写绑定的这个ng-template标签，和这个自定义组件没有任何宿主关联，Angular自然会判定这个绑定是非法的，直接抛出对应报错。
  既然规范要求不能把ng-template替换成自定义子组件的选择器，那只要别把绑定写在ng-template标签本身、保证绑定的目标元素/指令上确实有这个@Input属性，就能彻底解决这个问题。

方案1：把绑定移到ng-template内部的渲染元素上 #

很多人会犯这个常见错误——把本来应该写在内部元素上的绑定，直接写到了外层的ng-template标签上，相当于对着一个空的模板壳子要数据，编译器当然不认。
如果你需要渲染的目标就是NotificationComponent，完全不需要把绑定写在外层的ng-template标签上，直接在ng-template的标签内部写子组件选择器、做绑定即可，这种写法完全不违反规范：

<!-- 父组件模板 -->
<ng-template cxOutletRef="NotificationAlertContent" cxOutletPos="before">
  <!-- 绑定写在内部的子组件标签上，编译器会检查这个标签上的@Input，识别到parentData属性后就不会报错 -->
  <app-notification [parentData]="name"></app-notification>
</ng-template>

这种写法下，ng-template还是承担了cxOutletRef的配置职责，你没有把外层标签换成子组件选择器，完全符合要求。

方案2：借助CX Outlet内置的Context能力透传值 #

CX 的Outlet机制本身就提供了上下文透传的能力，不需要自定义属性绑定：

• 父组件的ng-template上，使用CXOutletDirective官方提供的cxOutletContext输入属性，把需要传递的值封装成对象传入——因为这个属性是CX指令本身定义的，编译检查会直接通过，不会报未知属性错：

<ng-template 
  cxOutletRef="NotificationAlertContent" 
  cxOutletPos="before"
  [cxOutletContext]="{ parentData: name }"
>
</ng-template>

• 传递的context对象会被CX Outlet系统顺着渲染链路自动传到对应的outlet挂载点，你只需要在NotificationComponent渲染outlet的位置，从context中取出parentData值，赋值给组件内部的同名字段即可。

方案3：通过共享服务实现跨组件数据流传递 #

如果两个组件不在直接的投影/输入链路关系上，可以用轻量的可注入共享服务传值，完全不改动现有模板结构：

• 新建共享服务，用BehaviorSubject存储需要从AppComponent传递的parentData值
• AppComponent注入服务，把name属性的值同步到服务的数据流中
• NotificationComponent注入同一个服务，在合适的生命周期钩子内订阅数据流，把拿到的值赋值给自身的parentData属性
• 这种方案不需要在ng-template上添加任何自定义绑定，从根源上规避了编译报错的问题。

• 不要为了消错去放宽Angular的模板严格检查配置，这种操作会丢失模板绑定的类型校验能力，容易引入隐蔽的运行时故障
• 不要通过自定义指令的方式，强行在ng-template上添加parentData的绑定别名，这种操作会和CX的版本升级产生兼容风险
• 不要尝试在ng-template标签上直接绑定自定义组件的@Input属性，这类绑定的目标和实际的组件宿主不匹配，哪怕通过编译检查，运行时也不会正确把值传到子组件上

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