为什么添加routerlink会弄乱样式？

Question

我正在尝试创建一个导航菜单，在该菜单中单击div，该div扩展为可单击以在应用程序中导航的链接。基本上看起来像这样：

“ test2”链接现在处于“展开”状态，显示了可导航的可点击链接。 “ test3”链接处于可折叠状态。但是，如果我单击“ test3”，则“ test3”将展开以显示其链接，而“ test2”将折叠。我想制作一个可以折叠/展开的动画。因此，要做到这一点，当前代码概要如下：

<div class="container" (click)="expand()" [ngClass]="{'expand': ...}">
   <div class="container-header">
     test2
   </div>
   <div class="container-links">
     <div *ngFor="let link of links">{{link}}</div>
   </div>
</div>

.container{
  height: 61px
  overflow: hidden
  .container-header{
    height: 61px;
  }
  &.expand{
    height: auto;
  }
}

因此，我基本上是故意使容器div溢出，并且当用户单击它时，高度将设置为auto以使其展开并显示链接。

一切正常。每当我向[routerLink]循环中的链接添加for时，都会出现此问题。当发生这种情况时，无论出于何种原因，都会发生这种情况：

'test2'标头被上推，并且'test'链接刚刚显示。似乎routerLink正在将标题移开，以便可以将其公开。 我对以上代码所做的更改是：

<div class="container" (click)="expand()" [ngClass]="{'expand': ...}">
   <div class="container-header">
     test2
   </div>
   <div class="container-links">
     <div *ngFor="let link of links" [routerLink]="">{{link}}</div>
   </div>
</div>

由于某种原因，它正在这样做。我不知道为什么。一整天都在为此苦苦挣扎。

Answer 1

请尝试对routerLink使用锚链接，而不要对div使用。 您可能会考虑使用ul和li。