Angular v15中mat-nav-list通过ng-template投影mat-list-item样式失效

问题现象 #

升级至Angular v15后，通过ng-template将mat-list-item投影到mat-nav-list中时，mat-list-item的悬停等交互样式无法正常生效。直接在mat-nav-list内编写mat-list-item时功能正常，且该场景在Angular Material v14中可正常运行。

复现代码 #

<mat-nav-list>
  <ng-container *ngTemplateOutlet="items"></ng-container>
</mat-nav-list>

<ng-template #items>
  <a mat-list-item href="https://google.com"> google </a>
  <a mat-list-item href="https://angular.io"> angular </a>
</ng-template>

问题原因 #

此问题已被官方确认为Angular Material的Bug，对应官方Issue编号27608。该Bug源于Angular v15版本中组件内部逻辑变更，导致投影内容的样式绑定出现异常。

临时处理建议 #

• 暂时避免使用ng-template投影的方式，直接将mat-list-item节点放置在mat-nav-list内部
• 关注官方Issue的修复进度，等待后续版本更新修复

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