Question

这是我的申请。

https://stackblitz.com/github/tsingh38/lastrada

我在导航方面遇到问题组件→NavbarComponent

我的目标是要有一个导航栏，其中将显示不同的链接。每个链接将路由到一个组件。

直接单击链接可以正常工作。有2个箭头链接也应分别导航到下一个或上一个组件。

  <div *ngIf="!isSearchBarActive">
        <ul class="nav nav-tabs"   style="margin-left: 50px;">
            <a  [routerLink]="[menuBarItemsInitView[0]]" (click)="onLeftClick()" *ngIf="isLeftClickEnabled"><span
                    class="glyphicon glyphicon-chevron-left"></span></a>
            <li role="presentation" *ngFor="let item of menuBarItemsInitView let i=index"><a  

                 [routerLink]="[item]"
                 routerLinkActive="active" 
                 [routerLinkActiveOptions]="{exact:
                    true}"
                    style="color:gray">{{item}}</a></li>
            <a [routerLink]="[menuBarItemsInitView[1]]" (click)="onRightClick()"   style="margin-left: 3em;" *ngIf="ifRightClickEnabled"><span
                    class="glyphicon glyphicon-chevron-right"></span></a>
        </ul>
    </div>

问题1：右键单击会转到正确的组件，但是单击鼠标左键不会转到正确的组件。

menuBarItemsInitView数组在导航栏中包含当前显示的链接。 menuBarItemsInitView [0]这是我在单击鼠标左键时指向的菜单，而在右键单击时指向menuBarItemsInitView 1的位置。我认为应该是menuBarItemsInitView [0]来指向左键或右键单击的第一个元素，但不幸的是它没有指向/路由到正确的组件。似乎在执行click事件时，路由器链接没有获得正确的值。

问题2：

与角度无关，但我正在努力适应导航栏中的所有元素。到目前为止，由于右侧有很多空白，它看起来很难看。我需要动态计算单元格的长度吗？

我尝试使用col-sm-XX将搜索div和导航div分为相等的长度，但是然后单击鼠标右键将其分为两行，这非常丑陋。

任何指针如何实现固定宽度，而与菜单项文本的长度无关。

谢谢

Answer 1

问题1：我认为滚动项目时遇到一些问题。这是您的代码的简单版本，可在左右滚动。

export class AppComponent {
  menuBarItemsAll:String[]=['Pizza','Indisch','Salat','Italinisch','Drink','AlkohalfreiGetäanke','Pide','Donör','Something1','Someething2','AlkohalfreiGetäanke','Something3','Someething21','Someething25']
  menuBarItemsInitView:String[];  
  initStartIndex=0;
  initNumberOfItemsToShow=5;
  isLeftClickEnabled=false;
  isRightClickEnabled=false;

  ngOnInit() {
    this.updateItemsInView(this.initStartIndex);
  }
  onLeftClick() {
    this.updateItemsInView(this.initStartIndex-1);
  }
  onRightClick() {
    this.updateItemsInView(this.initStartIndex+1);
  }
  updateItemsInView(indexStart:number){
    const lMin = 0;
    const lMax = this.menuBarItemsAll.length-this.initNumberOfItemsToShow;
    if (indexStart<lMin) indexStart = lMin;
    if (indexStart>lMax) indexStart = lMax;
    this.initStartIndex = indexStart;
    this.isLeftClickEnabled = indexStart > lMin;
    this.isRightClickEnabled = indexStart < lMax;
    this.menuBarItemsInitView = this.menuBarItemsAll.slice(indexStart, indexStart+this.initNumberOfItemsToShow);
  }
}

HTML：

<div>
    <button *ngIf="isLeftClickEnabled" (click)="onLeftClick()">LEFT</button>
    <span *ngFor="let item of menuBarItemsInitView">({{item}})</span>   
    <button *ngIf="isRightClickEnabled" (click)="onRightClick()">RIGHT</button>
</div>

问题2：正如您提到的那样，您发现它“丑陋”，我建议您寻找一种新的表示方式，而不必“计算”宽度。使用CSS即可响应，用户友好，无需人工计算。

渲染自定义导航栏项目

1 个答案: