Как использовать метод сценария Java для разных контейнеров?

Question

Я создал контейнер с некоторыми методами, которые функционируют, когда я щелкаю и наводю на него, проблема в том, что у меня много разных контейнеров, которые требуют одинаковых методов, но я не хочу создавать много методов для одной и той же работы.

<div class="container" (mouseenter)="boxHide=false" (mouseleave)="checkBox()">
  image

  data
  data
  <br>
  <br>
  <div class="xyz" [hidden]="boxHide">
    <hr>
    hidden. <button (click)="clickButton()">click me</button>
  </div>
  <div class="xyz1" [hidden]="hideDetails">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ul>
  </div>
</div>

<div class="container" (mouseenter)="boxHide=false" (mouseleave)="checkBox()">
  image

  data
  data
  <br>
  <br>
  <div class="xyz" [hidden]="boxHide">
    <hr>
    hidden. <button (click)="clickButton()">click me</button>
  </div>
  <div class="xyz1" [hidden]="hideDetails">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ul>
  </div>
</div>

boxHide = true;
  hideDetails = true;

  clickButton() {
    this.hideDetails = !this.hideDetails;
    this.boxHide = false;
  }

  checkBox() {
    this.boxHide = true;
    if (this.hideDetails) {
      this.boxHide = true;
    } else {
      this.boxHide = false;
    }
  }

.container{
    border: 1px solid black;
    width: max-content;
}

На данный момент, если я наведусь на любой из полей, оба поля будут расширены, но я хочу, чтобы раскрылся только один конкретный блок. И может быть много блоков, поэтому я не хочу создавать много переменных и функций для одной и той же работы.

Answer 1

Наилучшим подходом может быть создание компонента из повторно используемой логики. Если есть несколько блоков «одного вида», абстрагируйте его в дочерний компонент и используйте в родительском компоненте. Это решает проблему.

<div class="container" (mouseenter)="boxHide=false" (mouseleave)="checkBox()">
  image

  data
  data
  <br>
  <br>
  <div class="xyz" [hidden]="boxHide">
    <hr>
    hidden. <button (click)="clickButton()">click me</button>
  </div>
  <div class="xyz1" [hidden]="hideDetails">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
    </ul>
  </div>
</div>

Вы можете использовать массивы и индексы или модифицировать логику на основе уникального идентификатора, который вы можете передать каждому из повторяющихся контейнеров, но это нарушает концепцию кода многократного использования и Angular какоснова

Answer 2

Вы можете использовать массивы для хранения статуса ящиков, например,

public boxHide: boolean[] = [];

public clickButton(index) {
    this.boxHide[index] = false;
}

И в шаблоне:

<div class="container" (mouseenter)="boxHide[3]=false" ...
    <div class="xyz" [hidden]="boxHide[3]">
        <button (click)="clickButton(3)">click me</button>

И затем индексировать все свои ящики и т. Д. С отдельными номерами.