Question

我有一个家庭组件，用户在导航栏中具有登录选项。用户使用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(['/']);
  })
  }

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

Answer 1

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

解决方案是，当我创建WeeklyView组件时，它会自动导入到app.module文件中。该组件需要在weeklyView.module中而不是app.module中调用，并且删除引用会导致堆栈停止。

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

为什么零件在角度6的布线中彼此堆叠？

1 个答案: