Angular 5中点击调用doLogout方法报错，如何阻止路由跳转？

问题原因 #

你遇到的错误核心在于：Logout按钮同时绑定了routerLink="/logout"和(click)="doLogout()"。Angular会优先尝试执行路由跳转，但你的路由配置里并没有定义logout路径，所以抛出了Cannot match any routes的匹配错误。

解决方案 #

要实现点击按钮仅执行doLogout()方法、不触发路由跳转，只需完成以下两步：

1. 修改导航栏的Logout按钮代码

直接移除routerLink="/logout"属性，只保留点击事件绑定即可：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class='container'>
    <ul class="nav navbar-nav">
      <li class='nav-item'>
        <a class='nav-link' routerLink="/">Home</a>
      </li>
      <li class='nav-item'>
        <a class='nav-link' routerLink="/about">About</a>
      </li>
      <li class='nav-item'>
        <a class='nav-link' routerLink="/login">Log in</a>
      </li>
      <li class='nav-item'>
        <a class='nav-link' routerLink="/register">Register</a>
      </li>
      <li class='nav-item'>
        <!-- 移除routerLink，仅保留点击事件 -->
        <a class='nav-link' (click)="doLogout()">Log out</a>
      </li>
    </ul>
  </div>
</nav>

2. 优化doLogout方法（可选但推荐）

为了提升用户体验，建议在登出成功后自动跳转到登录页或首页，同时完善错误处理逻辑：

// auth.service.ts
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { Router } from '@angular/router';
import * as firebase from 'firebase/app';

@Injectable()
export class AuthService {
  constructor(private afAuth: AngularFireAuth, private router: Router) {}

  doLogout() {
    return new Promise((resolve, reject) => {
      const currentUser = firebase.auth().currentUser;
      if (currentUser) {
        this.afAuth.auth.signOut()
          .then(() => {
            localStorage.setItem('isLoggedIn', 'false');
            // 登出成功后跳转到登录页
            this.router.navigate(['/login']);
            resolve();
          })
          .catch(error => {
            console.error('登出失败:', error);
            reject(error);
          });
      } else {
        const error = new Error('当前没有用户登录');
        console.error(error.message);
        reject(error);
      }
    });
  }
}

额外说明 #

如果之后你需要支持通过直接访问/logout路径触发登出，可以在路由配置中添加一个空组件，或者在路由守卫中处理登出逻辑，但目前你的需求只需要移除routerLink即可解决问题。

内容的提问来源于stack exchange，提问作者Alex Ironside