使用自定义指令将mat-slide-toggle传入通用复用组件时为何失效？

核心问题 #

你遇到的mat-slide-toggle无法正常工作的情况，本质是自定义指令custom-expansion-panel传递内容时，没有正确处理Angular的内容投影上下文，导致mat-slide-toggle组件未完成初始化绑定。

修复步骤 #

1. 改造自定义指令，用TemplateRef传递内容
   通用组件app-expansion-panel需要接收模板而非直接DOM内容，才能在内部正确渲染并初始化Angular组件：

   • 更新custom-expansion-panel指令，注入TemplateRef：

     import { Directive, TemplateRef } from '@angular/core';
     
     @Directive({
       selector: '[custom-expansion-panel]'
     })
     export class CustomExpansionPanelDirective {
       constructor(public templateRef: TemplateRef<any>) { }
     }
     

   • 在app-expansion-panel组件中，通过ContentChild获取指令的模板：

     import { Component, ContentChild } from '@angular/core';
     import { CustomExpansionPanelDirective } from './custom-expansion-panel.directive';
     
     @Component({
       selector: 'app-expansion-panel',
       templateUrl: './expansion-panel.component.html'
     })
     export class ExpansionPanelComponent {
       @ContentChild(CustomExpansionPanelDirective) customPanel!: CustomExpansionPanelDirective;
     }
     

   • 在app-expansion-panel模板中，用ngTemplateOutlet渲染传入的模板：

     <div class="expansion-panel-container">
       <!-- 面板原有结构 -->
       <ng-container *ngTemplateOutlet="customPanel?.templateRef"></ng-container>
     </div>
     

2. 调整父组件的使用方式
   在app.component.html中，保持结构不变，确保mat-slide-toggle被包裹在带有custom-expansion-panel指令的元素内：

   <app-expansion-panel>
     <div custom-expansion-panel>
       <mat-slide-toggle>切换开关</mat-slide-toggle>
     </div>
   </app-expansion-panel>
   

3. 确认依赖模块导入
   检查AppModule或对应功能模块，确保已导入Material相关模块：

   import { MatSlideToggleModule } from '@angular/material/slide-toggle';
   import { MatExpansionModule } from '@angular/material/expansion';
   
   @NgModule({
     imports: [
       // 其他模块
       MatSlideToggleModule,
       MatExpansionModule
     ]
   })
   export class AppModule { }
   

原理说明 #

直接用ng-content投影DOM内容时，Angular组件（如mat-slide-toggle）可能因初始化时机、上下文绑定问题失效。通过TemplateRef传递模板再用ngTemplateOutlet渲染，能确保组件在正确的上下文完成初始化，事件和属性绑定正常生效。

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