为什么组件在角度 6 的路由中相互堆叠？答案

【问题标题】：Why do components stack on top of each other in routing in angular 6?为什么组件在角度 6 的路由中相互堆叠？
【发布时间】：2018-09-25 18:30:53
【问题描述】：

我有一个主页组件，用户在导航栏中有登录选项。用户使用 gmail id 登录后，他被重定向到另一个组件。问题在于，路由不是替换组件，而是将组件堆叠在一起。

控制台中没有错误。

下面是我的 service.ts 代码：

import { Injectable } from '@angular/core';
import {AngularFireAuth} from 'angularfire2/auth';
import {AngularFireDatabase} from 'angularfire2/database';
import * as firebase from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(public af: AngularFireAuth) { 

  }

  loginWithGoogle() {
    return this.af.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());

  }

  logout() {
    return this.af.auth.signOut().then(() => {
      window.location.assign("https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=http://localhost:4200/");

    })
  }

}

登录和注销功能如下：

login() {
    this.authService.loginWithGoogle().then((res) => {
      this.router.navigate(['/explore']);
    })

    }

logout() {
    this.authService.logout().then((res) => {
      this.router.navigate(['/']);
  })
  }

我找不到任何解决方案，请帮助我！

【问题讨论】：

您能否创建一个 StackBlitz 来重现该问题？
在导航时检查控制台是否有错误。另请参阅this question。
@ConnorsFan 没有错误。
你是否有机会在 Angulars Zones 之外使用 ES6 Promises？
@PhilippMeissner 我不知道区域怎么样，抱歉！

标签： angular firebase login angular6 logout

【解决方案1】：

我在 Angular 6 中开发时遇到了类似的堆叠路线问题，没有错误，我能够使用以下方法解决。我的默认路由是“localhost:4200/dashboard”，我在应用程序路由文件中添加了一个“weeklyView”路由。尽管模拟了我之前的组件，但访问weeklyView 路由会使路径变为“localhost:4200/dashboard/weeklyView”，而不是所需的“localhost:4200/weeklyView”。

解决方案是，当我创建了每周视图组件时，它会自动导入到 app.module 文件中。组件需要在weeklyView.module中调用，而不是在app.module中调用，移除引用导致堆叠停止。

我不确定这是否是您的问题，因为我不知道您的文件结构是什么样的，但我猜想路由“/explore”发送到的任何组件都已导入两个不同的模块.如果没有，我希望此答案对遇到此问题的其他人有所帮助，因为我找不到针对此特定错误的任何其他答案。

【讨论】：

【解决方案2】：

可能发生这种情况的另一个原因是，如果您的导航栏/菜单包含在多个组件中。

您的路由器可能正在尝试导航到 /dashboard，但您已经在 weekView 组件中。然后，路由器实际上会尝试导航到最有可能不是有效路由的每周视图/仪表板。

尝试重新调整您的应用程序，让您的导航菜单在您的应用程序范围的路由器插座也可用的同一组件（很可能是应用程序组件）中可用。

【讨论】：