Javascript 单击鼠标5调用函数

我有这个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>

现在，如何使用Angular 5中的

（单击）

调用此方法？谷歌奇怪地对Angular 5保持沉默。现在，如果我单击“注销”按钮，我会得到以下错误

错误：“未捕获（承诺中）：错误：无法匹配任何路由。URL段：'logout'

。我如何让它运行该功能，而不是重新定位？我认为后台有某种“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]},
];

---

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

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

---

我最后做的是：

我将该方法添加到主

app.component.ts

。这样，它在应用程序中的任何地方都可用。如下所示：

import {Component, ViewEncapsulation} from '@angular/core';
import {AuthService} from './core/auth.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  showLogout: boolean = false;

  constructor(
    public authService: AuthService,
    private router: Router,
  ) {
  }

  checkSession() {
    var checkKey = localStorage.getItem('sessionKey');
    if (checkKey == null) {
      this.showLogout = false; // changed
      console.log('null key: ', checkKey);
    } else {
      this.showLogout = true; // changed
      // this check will only be available once the user is logged in
      console.log('key exist: ', checkKey);
    }
  }

  logout() {
    this.authService.doLogout()
      .then((res) => {
        this.router.navigateByUrl('/login');
      }, (error) => {
        console.log('Logout error', error);
      });
  }
}

然后，在我的HTML模板中，我只做了以下操作：

<li class='nav-item'>
  <a class='nav-link' (click)="logout()" routerLink="/logout">Wyloguj</a>
</li>

威洛古

---

运行该功能是一回事，但您似乎也有路由问题。您可以发布您的路由模块吗？您没有

/logout

路由，这就是错误告诉您我已更新的路由。我只是不管理该案例。我以为它只会运行该功能。您的

doLogo将在那里处理所有问题ut

函数目前与路由无关。即使你想在函数内部处理重定向，你仍然需要将路由添加到你的routerConfigOk中，我想我有点明白了。并且确保你已经在一个模块中配置了所有路由。是否可以只将此添加到一个组件并让它工作每隔一次？好的，现在它确实重定向了我，但它没有调用函数。我的IDE说：

标识符没有定义。组件声明、模板变量声明和元素引用不包含这样的成员

。我向每个构造函数添加了

public svs:authService

。

import {Component, ViewEncapsulation} from '@angular/core';
import {AuthService} from './core/auth.service';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent {
  showLogout: boolean = false;

  constructor(
    public authService: AuthService,
    private router: Router,
  ) {
  }

  checkSession() {
    var checkKey = localStorage.getItem('sessionKey');
    if (checkKey == null) {
      this.showLogout = false; // changed
      console.log('null key: ', checkKey);
    } else {
      this.showLogout = true; // changed
      // this check will only be available once the user is logged in
      console.log('key exist: ', checkKey);
    }
  }

  logout() {
    this.authService.doLogout()
      .then((res) => {
        this.router.navigateByUrl('/login');
      }, (error) => {
        console.log('Logout error', error);
      });
  }
}

<li class='nav-item'>
  <a class='nav-link' (click)="logout()" routerLink="/logout">Wyloguj</a>
</li>