带routerLink的导航栏中的NgbDropdown不重定向

<nav>
  <ul>
    <li>
      <a routerLink="/home">Home</a>
    </li>
    <li ngbDropdown>
      <a ngbDropdownToggle>Dropdown</a>
      <ul ngbDropdownMenu>
        <li>
          <a routerLink="/about" ngbDropdownItem>About</a>
        </li>
        <li>
          <a routerLink="/contact" ngbDropdownItem>Contact</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

import { Router } from '@angular/router';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
  constructor(private router: Router) {}

  navigateTo(url: string, event: Event) {
    event.preventDefault();
    this.router.navigate([url]);
  }
}

<nav>
  <ul>
    <li>
      <a routerLink="/home">Home</a>
    </li>
    <li ngbDropdown>
      <a ngbDropdownToggle>Dropdown</a>
      <ul ngbDropdownMenu>
        <li>
          <a (click)="navigateTo('/about', $event)" ngbDropdownItem>About</a>
        </li>
        <li>
          <a (click)="navigateTo('/contact', $event)" ngbDropdownItem>Contact</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>