如何在 Angular 中使用侧边导航栏显示内容？

Question

大家好，

我想在单击左侧菜单中的任何索引时显示一些静态内容，如附图所示。此外，内容应该像 link https://docs.spring.io/spring-framework/docs/current/spring-framework-reference/core.html#beans-annotation-config 一样放在一个页面上。每当我单击任何索引时，用户都应该通过滚动页面看到相应的内容。任何人都可以建议我使用 Angular 和 bootstrap 实现此目的的想法吗？提前致谢。

Answer 1

用于使用边栏显示内容

.html

<div class="sidebar"> 
   <li (click)=""goToList('content1')>Side bar list 1</li>
</div>
<div id="content1" class="content1">
    CONTENT
</div>

.ts

goToList(id: any) {
    const element: HTMLElement = document.getElementById(id);
    if (element) {
         element.scrollIntoView({ behavior: 'smooth' });
     }
  }

试试这个方法，它会如你所愿地工作

如何在 Angular 中使用侧边导航栏显示内容？

How to show the content using side navigation bar in Angular?

angular

angular-bootstrap

sidenav