带导航的Angular5路由

我使用的是角度布线，我认为我没有以正确的方式使用它

它工作正常，但它扰乱了HTML导航栏：-信息，技能

当我使用bootstrap模式时，单击技能应该会弹出组件，因为它在实现路由之前工作良好

点击信息，我就可以

<div id="info">

下面是主页的HTML，它是一个标题导航栏，无论是在项目页面还是管理页面，它都应该正常工作

<ul class="navbar-nav  mr-auto navbarCustom">
   <li class="nav-item">
      <a class="nav-link" routerLink="" href="#">Home</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">
         <skills></skills>
      </a>
   </li>
   <li class="nav-item">
      <a class="nav-link" routerLink="/projects" href="#">Projects</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#info">Info</a>
   </li>
</ul>

不要将href与routerLink一起使用

只需使用[routerLink]=而不是routerLink=href=

当你点击信息时，它会把你带到你的html id片段。 比如你的情况。 它将在URL上重定向您，如下所示：

http://www....com//info. 所以用重定向到你的片段的散列标签。因为您正在html中使用

---

检查角度布线。

如果您创建了StackBlitzWhat当前不起作用，则可能更容易显示您的意思？

<ul class="navbar-nav  mr-auto navbarCustom">
   <li class="nav-item">
      <a class="nav-link" routerLink="" href="#">Home</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#">
         <skills></skills>
      </a>
   </li>
   <li class="nav-item">
      <a class="nav-link" routerLink="/projects" href="#">Projects</a>
   </li>
   <li class="nav-item">
      <a class="nav-link" href="#info">Info</a>
   </li>
</ul>