Angular是否会忽略ng-template内部元素绑定的CSS类？

最常见原因：Angular视图封装规则限制 #

这是90%以上同类问题的诱因：
Angular默认开启ViewEncapsulation.Emulated模拟视图封装，会给当前组件内的所有原生DOM元素自动添加唯一标识属性（格式类似_ngcontent-xxx-c123），同时自动给你在组件样式文件内写的所有CSS选择器加上对应属性选择器，实现组件间样式隔离。
而ng-template属于嵌入式视图模板：

• 如果模板仅在当前组件内通过else、ngTemplateOutlet直接渲染，正常会和其他组件内元素一样加上相同的属性前缀，样式可以正常生效
• 如果模板通过内容投影ng-content、TemplateRef输入传递给子组件渲染，渲染出来的DOM元素会被子组件的视图封装属性前缀覆盖，和当前父组件样式的前缀不匹配，就会出现类写了不生效的问题

其他可能原因 #

• 选择器优先级冲突：其他权重更高的CSS规则覆盖了.test类的样式，可打开浏览器开发者工具的元素面板，选中渲染后的div，查看样式列表中.test规则是否被划掉，确认是否存在覆盖
• 样式书写错误：检查.test类的样式是否存在语法错误，比如漏写括号、分号等，导致整段规则失效

对应解决办法 #

• 全局样式兜底：把.test的样式写在项目全局样式文件（styles.css/styles.scss等）中，全局样式不受视图封装限制，所有组件内的元素都能匹配到
• 关闭当前组件视图封装：在组件的@Component装饰器中添加配置项encapsulation: ViewEncapsulation.None，该组件的所有样式会变成全局生效，注意要给类名加前缀避免污染其他组件样式
• 穿透视图封装：在组件样式中使用::ng-deep伪类修饰选择器，写法为::ng-deep .test { /* 样式规则 */ }，该特性虽已被标记为弃用，但目前Angular所有稳定版本仍支持，可按需使用

你提供的代码示例属于当前组件内直接渲染的场景，如果没有跨组件传递模板的操作，优先排查样式优先级冲突和语法错误即可。

<div *ngIf='ifTrue; else notAvailable'>{{somethingHere}}</div>
<ng-template #notAvailable>
    <div class="test">N/A</div>
</ng-template>

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