Не удается открыть страницу входа с помощью routerLink

Question

Я пытаюсь перейти на / страницу входа, когда пользователь нажимает на опцию Вход / Регистрация, присутствующую в моем компоненте заголовка. Но всякий раз, когда я нажимаю на кнопку Войти / Регистрация, она остается на той же странице.

Мой файл app-routing.module.ts как показано ниже

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from './modules/login/login.component';
import {BlogComponent} from './modules/blog/blog.component';

const routes: Routes = [

  {
    path: '',
    redirectTo: 'blog',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: '**',
        component: BlogComponent
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from './modules/login/login.component';
import {BlogComponent} from './modules/blog/blog.component';

const routes: Routes = [

  {
    path: '',
    redirectTo: 'blog',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'blog',
    component: BlogComponent,
    children: [
      {
        path: '**',
        component: BlogComponent
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

и тег HTML, из которого я пытаюсь вызвать это, помещен в мой header.component.html

<a data-toggle="tooltip" title="Sign In/Sign Up" routerLink="/login" routerLinkActive="active" class="login">Login/SignUp</a>

Также я добавил роутер-розетку в свой app.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Хотя, когда я вручную перехожу на страницу входа, то есть, вводя в браузере localhost: 4200 / login , он успешно открывает страницу входа.

Мой полный код можно найти здесь -

https://github.com/vibhorgoyal18/atest-blog/tree/master/src/app

Answer 1

Чувак, я был очень скромен с тобой. Я имею в виду, я клонирую ваш проект, потому что проблема была действительно редкой. Я просто скажу тебе это. В следующий раз попробуйте сначала просмотреть весь ваш код, а затем представить проблему здесь, в сообществе.

Проблема заключалась в том, что у вас в проекте ContentComponent и внутри него вы вызываете некоторые службы, но вы хотите unsubscribe эти службы в цикле событий ngOnDestroy.

export class ContentComponent implements OnInit, OnDestroy {
  pageContent: string;
  blogContentSubscription: Subscription;
  contentSubscription: Subscription;

  constructor(private blogService: BlogService, private http: HttpClient) {
  }

  ngOnInit() {
    this.blogContentSubscription = this.blogService.selectedNode.subscribe((node) => {
      this.blogService.getPageContent(node).subscribe(data => {
      }, (res: HttpErrorResponse) => {
        this.pageContent = res.error.text;
      });
    });
  }

  ngOnDestroy(): void {
    this.blogContentSubscription.unsubscribe();
    this.contentSubscription.unsubscribe();
  }
}

Если вы посмотрите код, вы звоните blogContentSubscription и затем отмените подписку, но вы также отмените подписку contentSubscription, но вы не звоните раньше. Итак, результат ...

Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefined

и это то, что останавливает маршрут входа. Вам просто нужно удалить строку, где вы отписываетесь contenSubscription, и она заработает.

Попробуй лучше рассмотреть в следующий раз. Это было бы невозможно, если вы не разместите все детали

Answer 2

Вам необходимо импортировать RoutingModule в модуль, который объявляет HeaderComponent