Question

我已经将路由添加到我的角度项目中。而且工作正常。但是我对路由器的活动状态有疑问。

我使用路由器链接来链接路由器，并添加活动路由器以找到已激活的路由器。

我在项目中使用了引导程序默认的导航栏，并在下拉菜单中添加了以下内容。

<li class="nav-item dropdown" routerActive="active">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" routerLink="/link-one">Link One</a>
          <a class="dropdown-item" routerLink="/link-two">Link Two</a>
          <a class="dropdown-item" routerLink="/link-three">Link Three</a>
        </div>
      </li>

但是当用户单击“路由器链接”时，活动的路由器不起作用。此问题仅适用于下拉菜单，但在单个导航栏项目中效果最佳。

这是什么问题？

Answer 1

如果要将活动类添加到li中，则必须使用模板引用或TS中的路由器。

<li class="nav-item dropdown" [class.active]="link0rla.isActive || link1rla.isActive || link2rla.isActive">
  <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    <a class="dropdown-item" routerLinkActive #link0rla="routerLinkActive" routerLink="/link-one">Link One</a>
    <a class="dropdown-item" routerLinkActive #link1rla="routerLinkActive" routerLink="/link-two">Link Two</a>
    <a class="dropdown-item" routerLinkActive #link2rla="routerLinkActive" routerLink="/link-three">Link Three</a>
  </div>
</li>

如果要通过路由器进行操作：

get isLiActive() {
  return ['/link-one', '/link-two', '/link-three']
    .some(link => this.router.url.startWith(link));
}

constructor(private router: Router) {}

Answer 2

您需要将routerActive放在添加了<a></a>的同一个 anchor 标签routerLink中。

如果将其放在<li>

中，它将不起作用

尝试这样：

<a class="dropdown-item" routerLink="/link-one" routerActive="active" >Link One</a>

Answer 3

您必须将ng-dropdown与angular一起使用：

<div ngbDropdown class="dropdown">
  <button class="btn btn-outline-primary" id="dropdownMenuLink" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownMenuLink">
    <button ngbDropdownItem ><a routerLink="link-one">Link One</a></button>
    <button ngbDropdownItem ><a routerLink="link-two">Link Two</a></button>
    <button ngbDropdownItem ><a routerLink="link-three">Link Three</a></button>
  </div>

我最近有同样的问题

如何正确使用角度布线？

3 个答案: