如何使用纯角2没有jquery获得下一个li和之前的li

Question

我有这样的数组

this.tabMenuItems = [
        {
          "tabId":1,
          "item":"2017",
          "link":['/artists',this.artistId,'edit']  
        },
        {
          "tabId":2,
          "item":"2016" ,
          "link":['/artists',this.artistId,'edit'] 
        },
        {
          "tabId":3,
          "item":"2015" ,
          "link":['/artists',this.artistId,'edit'] 
        }

      ];

我有一个以这种方式绑定的模板，作为标签

<

div class="tab-menu">   
      <ul>
          <li #tabMenuTemplate
              [routerLink]="menu.link" 
              [ngClass]="{'current': isActive(menu.link)}"
              class="tabmenu-{{index}}"
              *ngFor="let menu of tabMenuItems;let index = index"> {{menu.item}} </li>
      </ul>

      <button (click)="onNavMenuClick('left')" class="tab-left-arrow"></button>

  <button (click)="onNavMenuClick('right')"class="tab-right-arrow"></button>

</div>

如果我们单击下一个或上一个按钮，我需要移动到另一个选项卡。我尝试使用组件中的@ViewChild使用模板引用来访问它。

这样@ViewChild("tabMenuTemplate") tabMenuTemplate;

var next =new ElementRef(this.tabMenuTemplate.nativeElement.nextSibling);

但无法达到预期的效果。请建议哪种方法最好

Answer 1

你已经有一个数组，你正在循环生成你的标签，你可以简单地使用它来找出当你点击下一个或上一个时你要导航到哪一个，根据你当前的选择，你不需要得到实际标签元素。

所以在你的下一个回事件中，你可以使用router.navigate()根据你在数组中的位置移动到不同的链接。

您还可以使用RouterLinkActive激活所选链接。

这是一个简单的StackBlitz example !!

HTML

<ul>
    <li *ngFor="let menu of tabMenuItems;let index = index" (click)="setTab(index)">
        <a [routerLink]="menu.link"  routerLinkActive="active-link">
            {{menu.item}}
        </a>
    </li>
</ul>
<hr />
<button (click)="back()" [disabled]="selectedTab == 0">Previous</button>
<button (click)="next()" [disabled]="selectedTab == tabMenuItems.length-1">Next</button>
<hr />
<router-outlet></router-outlet>

零件

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tabMenuItems = [
    {
      "tabId": 1,
      "item": "child1",
      "link": ['/child1']
    },
    {
      "tabId": 2,
      "item": "child2",
      "link": ['/child2']
    },
    {
      "tabId": 3,
      "item": "child3",
      "link": ['/child3']
    }
  ];

  selectedTab = 0;

  constructor(private router: Router) { }

  setTab(index) {
    this.selectedTab = index;
  }

  next() {
    if (this.selectedTab < this.tabMenuItems.length) {
      this.selectedTab++;
      this.router.navigate(this.tabMenuItems[this.selectedTab].link);
    }
  }

  back() {
    if (this.selectedTab > 0) {
      this.selectedTab--;
      this.router.navigate(this.tabMenuItems[this.selectedTab].link);
    }
  }
}

希望这可以帮助！！