Question

每当用户单击标题组件中的“登录/注册”选项时，我都试图导航至/ 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

Answer 1

您需要将RoutingModule导入到声明HeaderComponent的模块中

Answer 2

伙计，我真的很谦虚。我的意思是，我克隆了您的项目，因为问题确实很少见。我只想告诉你这个。在接下来的情况下，请尝试首先检查您的所有代码，然后在社区中向此处提出问题。

问题是您在项目中有一个ContentComponent，并且在其中调用了一些服务，但是您想在ngOnDestroy事件周期中unsubscribe进行这些服务。

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的行即可使用。

下次尝试对其进行更好的审查。如果您不发布所有详细信息，那将是不可能的

无法使用routerLink打开登录页面

2 个答案: