Angular 仅切换点击的元素

Question

我有一个切换 div 区域的方法。

目前我有3个区域

app.component.ts

show = false;


toggle() {
    this.show = !this.show;
}

app.component.html

<div>
    <div *ngIf="show">
      <div>One</div>
    </div>
    <button type="button" toggle()"></button>
</div>

<div>
    <div *ngIf="show">
      <div>Two</div>
    </div>
    <button type="button" toggle()"></button>
</div>

<div>
    <div *ngIf="show">
      <div>Three</div>
    </div>
    <button type="button" toggle()"></button>
</div>

目前将显示和隐藏 3 个部分。

我怎样才能改变它，让它只切换 div 和我点击按钮的 *ngIf="show"？

Answer 1

我想下面是你想要的： app.component.ts

toggleStatus =[false,false,false];

toggle(index:number) {
    this.toggleStatus[index] = !this.toggleStatus[index];
}

app.component.html

<div>
    <div *ngIf="toggleStatus[0]">
      <div>One</div>
    </div>
    <button type="button" toggle(0)"></button>
</div>

<div>
    <div *ngIf="toggleStatus[1]">
      <div>Two</div>
    </div>
    <button type="button" toggle(1)"></button>
</div>

<div>
    <div *ngIf="toggleStatus[2]">
      <div>Three</div>
    </div>
    <button type="button" toggle(2)"></button>
</div>

Answer 2

你可以有一个负责任的 class 来做这件事，每个属性 div:

class SectionVisibilityHandler {
     private boolean _div1 = false;
     private boolean _div2 = false;
     private boolean _div3 = false;

     public toggle(idx: number): boolean {
         this['_div' + idx] = !this['_div' + idx];
     }

     public get div1(): boolean {
         return this._div1;
     }

     public get div2(): boolean {
         return this._div2;
     }

     public get div3(): boolean {
         return this._div3;
     }
}

然后，使用 getter 访问这些属性：

<div>
   <div *ngIf="visibilityHandler.div1">
     <div>One</div>
   </div>
   <button type="button" toggle()"></button>
</div>

<div>
    <div *ngIf="visibilityHandler.div2">
      <div>Two</div>
    </div>
    <button type="button" toggle()"></button>
</div>

<div>
    <div *ngIf="visibilityHandler.div3">
      <div>Three</div>
    </div>
    <button type="button" toggle()"></button>
</div>

可见性处理程序对象在您的组件属性中定义：

public visibilityHandler: SectionVisibilityHandler = new SectionVisbilityHandler();

这样，您可以在特定 class 和方法中自定义 showing/hiding 和 div 背后的逻辑。

但是，您可以将此 class 定义为服务并将其注入到组件中。

注意： 如果您的 div 是动态生成的，那么您需要一个数组来处理 class 和两种方法，一种用于切换特定的index 和另一个按索引访问数组元素的方法。

Answer 3

如果您不希望在控制器中使用三个不同的布尔值，您可以查看 Angular TemplateRef 为每个部分创建不同的模板。

模板

<ng-template #templateOne>
  One
</ng-template>

<ng-template #templateTwo>
  Two
</ng-template>

<ng-template #templateThree>
  Three
</ng-template>

<ng-container *ngTemplateOutlet="template"></ng-container>
<br /><br />

<button type="button" (mouseup)="showRef(templateOne)">Show Template 1</button>
<button type="button" (mouseup)="showRef(templateTwo)">Show Template 2</button>
<button type="button" (mouseup)="showRef(templateThree)">Show Template 3</button>
<button type="button" (mouseup)="showRef(null)">Hide all</button>

现在可以将控制器中的template变量设置为需要显示的<ng-template>块

import { Component, TemplateRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  template: TemplateRef<any>;

  showRef(template: TemplateRef<any>) {
    this.template = template;
  }
}

工作示例：Stackblitz

Answer 4

您也可以使用[ngSwitch]来解决这个问题。（参见下面的 stackblitz）

app.component.html

<nav>
  <ul style="cursor: pointer;">
    <li (click)="showTab('tab1')"><a href="#">Tab1</a></li>
    <li (click)="showTab('tab2')"><a href="#">Tab2</a></li>
    <li (click)="showTab('tab3')"><a href="#">Tab3</a></li>
  </ul>
</nav>
<ng-container [ngSwitch]="tab">
  <div *ngSwitchCase="'tab1'">
    <h1>Tab 1</h1>
  </div>
  <div *ngSwitchCase="'tab2'">
    <h1>Tab 2</h1>
  </div>
  <div *ngSwitchCase="'tab3'">
    <h1>Tab 3</h1>
  </div>
</ng-container>

app.component.ts

export class AppComponent  {
  public tab: string = "tab1";

  public showTab(tab: string) {
    this.tab = tab;
  }
}

https://stackblitz.com/edit/angular-ivy-snj6zw

https://angular.io/api/common/NgSwitch

Angular 仅切换点击的元素

Angular Toggle only the element click on

typescript

angular

angular9

app.component.html

app.component.ts