如何在角度的行的下一列中打开routerLink？

Posted 2021-04-04

我正在创建一个仪表板，并使用bootstrap网格创建侧边栏菜单。现在我想点击任何侧边栏菜单的routerLink。我的目标是打开该行的下一列中的链接，通常发生在仪表板/管理面板中。但在我的情况下，当我点击链接时，它会转到下一页。

<div class="row">
<div class="col-sm-2">
<div class="list-group">
     <a routerLink="dashboard" class="list-group-item active"> Dashboard</a>
        <div>
           <a class = "list-group-item" data-toggle="collapse" 
                  href="#collapse1">Accessories</a>

          <div id="collapse1" class="panel-collapse collapse bgColor">
             <div class="list-group">
      <a routerLink ="add-new" class="list-group-item">Add new Accessory</a>
      <a routerLink ="view-accessories" class="list-group-item">View Accessories</a>

          </div>
        </div>
      </div>
    </div>
   </div>
<div class="col">

</div>
</div>


I expect the output that link should be open in next column of row.
but here in my case it goes to next page. how to resove this.[enter image description here][1]


  [1]: https://i.stack.imgur.com/DVyLQ.jpg

答案

它通常通过具有常量元素（如仪表板）在路由器出口之外的布局来实现。比如说，在你的AppComponent中：

<app-navbar></app-navbar>
<app-vertical-nav></app-vertical-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>