javascript - 单击 Angular 5 调用函数

Question

我有这个 HTML

<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'>
        <a class='nav-link' (click)="doLogout()" routerLink="/logout">Log out</a>
      </li>
    </ul>
  </div>
</nav>

在 auth.service.ts 文件中我有这个方法:

doLogout() {
  return new Promise((resolve, reject) => {
    if (firebase.auth().currentUser) {
      this.afAuth.auth.signOut();
      localStorage.setItem('isLoggedIn', 'false');
      resolve();
    }
    else {
      reject();
    }
  });
}

现在如何在 Angular 5 中使用 (click) 调用此方法？谷歌对 Angular 5 出奇地沉默。现在，如果我点击注销按钮，我会收到此错误 错误错误:“未捕获( promise ):错误:无法匹配任何路由。URL 段:'注销'。我怎样才能让它运行函数，而不是重定位？我认为后台有某种“preventDefault”。

我的路线

export const rootRouterConfig: Routes = [
  // {path: '', redirectTo: '', pathMatch: 'full'},
  {path: '', component: HomeComponent},
  {path: 'about', component: AboutComponent},
  {path: 'login', component: LoginComponent, canActivate: [AuthGuard]},
  {path: 'register', component: RegisterComponent, canActivate: [AuthGuard]},
  {path: 'user', component: UserComponent, resolve: {data: UserResolver}},
  // {path: 'tasks', component: TasksComponent, canActivate: [AuthGuard]},
];

Answer 1

您可以使用服务实例调用方法

<a class='nav-link' (click)="svs.doLogout()" routerLink="/logout">Log out</a> 

并确保将您的服务注入(inject)到构造函数中

constructor( public svs: authService) {}