Почему компоненты располагаются друг над другом при маршрутизации под углом 6?

Question

У меня есть домашний компонент, где у пользователя есть опция входа в систему на панели навигации.После входа пользователя с идентификатором Gmail он перенаправляется на другой компонент.Проблема в том, что вместо замены компонентов маршрутизация размещает компоненты друг над другом.

В консоли нет ошибок.

Ниже приведен мой код 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 в файл app-routing.Несмотря на эмуляцию моих предыдущих компонентов, при доступе к маршруту WeeklyView путь стал бы «localhost: 4200 / dashboard / weeklyView», а не желаемым «localhost: 4200 / weeklyView».

Решение было в том, что когда я создавал свойWeeklyView Компонент, он был автоматически импортирован в файл app.module.Компонент должен вызываться в WeeklyView.module, а не в app.module, и удаление ссылки привело к остановке стекирования.

Я не уверен, что это ваша проблема, так как я не знаюкакова ваша файловая структура, но я думаю, что любой компонент, который посылает маршрут / explore, был импортирован в два разных модуля.И если нет, я надеюсь, что этот ответ будет полезен для других, кто столкнулся с этой проблемой, так как я не мог найти другие ответы на эту конкретную ошибку.