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

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

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


angular angular-routerlink angular-router
person VIBHOR GOYAL    schedule 16.03.2019    source источник
comment
А вот только не работает '/login' или все они не работают?   -  person Kenry Sanchez    schedule 16.03.2019
comment
/blog — маршрут по умолчанию. Итак, это работает нормально. Также я могу успешно загружать компоненты в компоненты моего блога. Но /login не работает должным образом   -  person VIBHOR GOYAL    schedule 16.03.2019

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

person Kenry Sanchez    schedule 16.03.2019

arrow_upward
0
arrow_downward

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

person Adrian Brand    schedule 16.03.2019
comment
Я попытался импортировать RouterModule в мои app.component.ts и header.component.ts. Но никто не помог. - person VIBHOR GOYAL; 16.03.2019