Typescript 需要帮助重构tyepscript函数吗

这是我关于stackoverflow的第一个问题。道歉，如果它不符合标准。我会尽力的

我最近开始了一个角度项目

这个问题是如何在typescript中重构4个简单函数（它们做同样的事情），使其成为1个函数。该函数是一个简单的切换，打开并显示更多内容，然后在关闭时隐藏

目前我有四个div，每个div都有自己的函数。所有四个都做完全相同的事情

在HTML和tyepScript代码中，您会注意到每个toogleLinks函数增加1。例如，toogleLinks1（），toogleLinks2（），toogleLinks3（）等

此外，ngIf指令和ngClass指令中为每个Div使用的变量也会增加1。 例如，ngIf=“切换1”、ngIf=“切换2”、ngIf=“切换3”

我将在下面展示HTML和typescript代码

我希望你们都有你需要的信息

谢谢

<div id = 'menu-main-links'>
  <div class = 'main-menu-link-item'>
    <!-- click event occurs here-->
    <div class = 'submenu-heading'  (click)="toogleLinks1($event)"  [ngClass]="status1 ? 'open' : 'close'">
      <h1>Platform</h1>
    </div> 

      <div class = 'sidebar-submenu' *ngIf = "toggle1" [ngClass]="status1 ? 'open' : 'close'">

      <!--revealed content goe here -->

    </div>
  </div>

  <div class = 'main-menu-link-item'>
    <!-- click event occurs here-->
    <div class = 'submenu-heading'  (click)="toogleLinks2($event)"  [ngClass]="status2 ? 'open' : 'close'">
      <h1>Platform</h1>
    </div> 

      <div class = 'sidebar-submenu' *ngIf = "toggle2" [ngClass]="status2 ? 'open' : 'close'">

      <!--revealed content goe here -->

    </div>
  </div>  

  <div class = 'main-menu-link-item'>
    <!-- click event occurs here-->
    <div class = 'submenu-heading'  (click)="toogleLinks3($event)"  [ngClass]="status3 ? 'open' : 'close'">
      <h1>Platform</h1>
    </div> 

      <div class = 'sidebar-submenu' *ngIf = "toggle3" [ngClass]="status3 ? 'open' : 'close'">

      <!--revealed content goe here -->

    </div>
  </div>

  <div class = 'main-menu-link-item'>
    <!-- click event occurs here-->
    <div class = 'about-us-heading'  (click)="toogleLinks4($event)"  [ngClass]="status4 ? 'open' : 'close'">
      <h1>Platform</h1>
    </div> 

      <div class = 'sidebar-submenu' *ngIf = "toggle4" [ngClass]="status4 ? 'open' : 'close'">

      <!--revealed content goe here -->

    </div>
  </div>
</div>







export class LayoutComponent {

  constructor() { }

  ngOnInit(): void {
  }

  toggle1 = false;
  status1 = false;

  toggle2 = false;
  status2 = false;

  toggle3 = false;
  status3 = false;

  toggle4 = false;
  status4 = false;
    



  toogleLinks1(event: Event){
    setTimeout( () =>{
      if (!this.toggle1) {
        this.toggle1 = true;
        this.status1 = !this.status1;
      } else{
        this.toggle1 = false;
        this.status1 = false;
      }
    },100)
  }

  toogleLinks2(event: Event){
    setTimeout( () =>{
      if (!this.toggle2) {
        this.toggle2 = true;
        this.status2 = !this.status1;
      } else{
        this.toggle2 = false;
        this.status2 = false;
      }
    },100)
  }

  toogleLinks3(event: Event){
    setTimeout( () =>{
      if (!this.toggle3) {
        this.toggle3 = true;
        this.status3 = !this.status2;
      } else{
        this.toggle3 = false;
        this.status3 = false;
      }
    },100)
  }

  toogleLinks4(event: Event){
    setTimeout( () =>{
      if (!this.toggle4) {
        this.toggle4 = true;
        this.status4 = !this.status3;
      } else{
        this.toggle4 = false;
        this.status4 = false;
      }
    },100)
  }

}

站台
站台
站台
站台
导出类LayoutComponent{
构造函数（）{}
ngOnInit（）：void{
}
toggle1=假；
状态1=假；
toggle2=假；
状态2=错误；
toggle3=假；
状态3=假；
toggle4=假；
状态4=假；
toogleLinks1（事件：事件）{
设置超时（（）=>{
如果（！this.toggle1）{
this.toggle1=true；
this.status1=！this.status1；
}否则{
this.toggle1=false；
this.status1=false；
}
},100)
}
toogleLinks2（事件：事件）{
设置超时（（）=>{
如果（！this.toggle2）{
this.toggle2=true；
this.status2=！this.status1；
}否则{
this.toggle2=false；
this.status2=false；
}
},100)
}
toogleLinks3（事件：事件）{
设置超时（（）=>{
如果（！this.toggle3）{
this.toggle3=真；
this.status3=！this.status2；
}否则{
this.toggle3=false；
this.status3=false；
}
},100)
}
toogleLinks4（事件：事件）{
设置超时（（）=>{
如果（！this.toggle4）{
this.toggle4=true；
this.status4=！this.status3；
}否则{
this.toggle4=false；
this.status4=false；
}
},100)
}
}

您可以用不同的方式重构当前代码

解决方案1: 创建一个子组件，您可以在其中传递内容和标题作为参数。切换逻辑将保留在该子组件中。您可以根据您的要求对此进行增强

export class LinkComponent {
  @Input() title: string;
  status: boolean;

  toogleLinks(toggle: string) {
    this.status = !this.status;
  }
}

<div class="main-menu-link-item">
  <div
    class="submenu-heading" (click)="toogleLinks('toggle1')"
    [ngClass]="status ? 'open' : 'close'">
    <h3>{{title}}</h3>
  </div>
  <div
    class="sidebar-submenu" *ngIf="status"
    [ngClass]="status ? 'open' : 'close'">
    <ng-content></ng-content>
  </div>
</div>

在模板中，将变量名传递给该函数

<div class="main-menu-link-item">
    <div class="submenu-heading" (click)="toogleLinks('toggle1')" 
    [ngClass]="toggle1 ? 'open' : 'close'">
        <h3>Platform 1</h3>
    </div>
    <div class="sidebar-submenu" *ngIf="toggle1" 
    [ngClass]="status1 ? 'open' : 'close'">
        <h2>Platform 1</h2>
    </div>
</div>

第一站台
第一站台

另外，维护CSS类不需要status变量，可以使用

toggle

变量

工作代码沙盒：-

---

嘿，维姆，谢谢你的回答！我尝试了解决方案2。我在控制台中不断收到以下错误消息：“*”在“LayoutComponent”类型上找不到具有“string”类型参数的索引签名。“**这与示例中的toggleLinks函数有关，toggleLinks（toggle:string）{This[toggle]=！This[toggle]；}再次感谢！请共享您的代码，因为您可以看到它在这个环境中工作

  toggle1 = false;
  toggle2 = false;
  toggle3 = false;
  toggle4 = false;

  toogleLinks(toggle: string) {
    this[toggle] = !this[toggle];
  }

<div class="main-menu-link-item">
    <div class="submenu-heading" (click)="toogleLinks('toggle1')" 
    [ngClass]="toggle1 ? 'open' : 'close'">
        <h3>Platform 1</h3>
    </div>
    <div class="sidebar-submenu" *ngIf="toggle1" 
    [ngClass]="status1 ? 'open' : 'close'">
        <h2>Platform 1</h2>
    </div>
</div>