Question

我想使用一些Li列表来显示/隐藏多个divs angular2。

该页面最初将显示所有div。当小屏幕我隐藏一些div在小屏幕上当我点击列表1如何显示特定的Div

<li><i class="fa fa-location-arrow" aria-hidden="true" (click)="showDiv(1)"></i>Locator</li>
<li><i class="fa fa-gift" aria-hidden="true" (click)="showDiv(2)"></i>Offer</li>
<li><i class="fa fa-phone" aria-hidden="true" (click)="showDiv(3)"></i> Contact</li>
<li><i class="fa fa-calendar" aria-hidden="true" (click)="showDiv(4)"></i>Holiday</li>
<li><i class="fa fa-question-circle-o" aria-hidden="true" (click)="showDiv(4)"></i>FAQ</li>

<div id="div1" *ngIf="windowWidth > 767">Lorum Ipsum</div>
<div id="div2" *ngIf="windowWidth > 767">Lorum Ipsum</div>
<div id="div3" *ngIf="windowWidth > 767">Lorum Ipsum</div>
<div id="div4" *ngIf="windowWidth > 767">Lorum Ipsum</div>

file.ts：

windowWidth: number = window.innerWidth;

  //initial values, The window object may still be undefined during this hook, let me know if that's the case and we'll figure out a better hook for the initial value
  ngAfterViewInit() {
      this.windowWidth = window.innerWidth;
  }

  //if screen size changes it'll update
  @HostListener('window:resize', ['$event'])
  resize(event) {
      this.windowWidth = window.innerWidth;
  }

Answer 1

class MyComponent {
  selectedIndex = -1;

  showDiv(index) {
    this.selectedIndex = index;
  }
}

<li><i class="fa fa-location-arrow" aria-hidden="true" (click)="showDiv(1)"></i>Locator</li>
<li><i class="fa fa-gift" aria-hidden="true" (click)="showDiv(2)"></i>Offer</li>
<li><i class="fa fa-phone" aria-hidden="true" (click)="showDiv(3)"></i> Contact</li>
<li><i class="fa fa-calendar" aria-hidden="true" (click)="showDiv(4)"></i>Holiday</li>
<li><i class="fa fa-question-circle-o" aria-hidden="true" (click)="showDiv(4)"></i>FAQ</li>

<div id="div1" *ngIf="windowWidth > 767 && selectedIndex === 1">Lorum Ipsum</div>
<div id="div2" *ngIf="windowWidth > 767 && selectedIndex === 2">Lorum Ipsum</div>
<div id="div3" *ngIf="windowWidth > 767 && selectedIndex === 3">Lorum Ipsum</div>
<div id="div4" *ngIf="windowWidth > 767 && selectedIndex === 4">Lorum Ipsum</div>

显示/隐藏多个Divs angular2

1 个答案: