单击角度7的下拉菜单中的锚点时如何停止传播

Question

当我单击下拉菜单时，它显示所有嵌套菜单的列表，但是当我单击嵌套链接时，它关闭下拉列表，我希望不关闭下拉列表，我使用的是角度7，这是我的菜单

    <ul class="navbar-nav" >

    <li class="nav-item">
      <a class="nav-link text-truncate collapsed" href="#submenu1" data- 
       toggle="collapse" data-target="#submenu1"
        aria-expanded="false"><i class="fa fa-file-alt"></i> <span class="d- 
        none d-sm-inline">Contracts </span></a>
      <div class="collapse" id="submenu1" aria-expanded="false">

        <ul class="flex-column nav" >

         <li class="nav-item" ><a class="nav-link py-1" 
        (click)="navPropigation($event)" 
        routerLink="/contracts/supplier">Supplier Contract </a></li>

          <li class="nav-item"><a class="nav-link py-1" 
           routerLink="/contracts/client">Client Contracts</a></li>

          <li class="nav-item"><a class="nav-link py-1" data-toggle="modal" 
           data-target="#exampleModal">Create Contracts</a></li>

        </ul>
      </div>
    </li>
  </ul> 

我已在component.ts文件中使用了以下代码行，但无法正常工作

navPropigation($event)
{
$event.stopPropagation();
}

我尝试了很多其他事情，但对我来说却无济于事