时间戳

首页 > 解决方案 > 需要帮助重构打字稿功能

typescript - 需要帮助重构打字稿功能

问题描述

这是我关于stackoverflow的第一个问题。抱歉，如果它没有达到标准。我会尽力的。

我最近开始了一个 Angular 项目。

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

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

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

此外，每个 Div 的 ngIf 指令和 ngClass 指令中使用的变量也增加 1。例如，ngIf = " toggle1 " 、ngIf = " toggle2 "、ngIf = " toggle3 "。

我将在下面展示 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)
  }

}

标签： typescriptrefactoring

解决方案

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

解决方案 1： 创建 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 id="menu-main-links">
  <app-link title="Platform 1">
    <h2>Platform 1</h2>
  </app-link>
  <app-link title="Platform 2">
      <h2>Platform 2</h2>
  </app-link>
</div>

解决方案 2： 您可以创建 1 个函数，您只需在其中传递将处理该部分切换的变量名称。

  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>

此外，您不需要状态变量来维护 CSS 类，您可以使用该toggle变量。

工作代码框：-

https://codesandbox.io/s/toggle-comon-function-qjsou?file=/src/app/app.component.html

推荐阅读