Блог

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

Мой файл 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>
  

Также я добавил router-outlet в свой 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

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

Проблема заключалась в том, что у вас в вашем проекте есть 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 , и это сработает.

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

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