Angular 8 路由无法正确导航答案

【问题标题】：Angular 8 routing not navigating properlyAngular 8 路由无法正确导航
【发布时间】：2020-04-02 17:59:23
【问题描述】：

我在我的应用程序中为客户端工作创建了一个单独的路由模块，称为 client.module.ts，并在 app.module 中调用它。但是由于导航到路由后的一些问题，组件的内容没有显示出来。控制台什么也没显示...只是页脚出现了，因为我将它放在 app.component.html 下面是我的 app.module 设置

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { ClientModule } from './client/client-routing/client.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './client/home/home.component';
import { FooterComponent } from './client/footer/footer.component';
import { FeaturedBlogComponent } from './client/featured-blog/featured-blog.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';



@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    FooterComponent,
    FeaturedBlogComponent,
    PageNotFoundComponent

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的 client-routing.module.ts 文件如下

import { Routes, RouterModule } from '@angular/router';
import { BlogListComponent } from '../blog-list/blog-list.component';
import { BlogDetailComponent } from '../blog-detail/blog-detail.component';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';

const routes: Routes = [
  {path: 'blogs', component: BlogListComponent},
  {path: 'blog/:_id', component: BlogDetailComponent},
  {path: 'about', component: AboutComponent},
  {path: 'contact', component: ContactComponent}
];

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

下面是我要导入到 app.module 中的 client.module.ts 文件

import { CommonModule } from '@angular/common';

import { ClientRoutingModule } from './client-routing.module';
import { BlogListComponent } from '../blog-list/blog-list.component';
import { BlogDetailComponent } from '../blog-detail/blog-detail.component';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';


@NgModule({
  declarations: [BlogListComponent, BlogDetailComponent, AboutComponent, ContactComponent],
  imports: [
    CommonModule,
    ClientRoutingModule
  ]
})
export class ClientModule { }

您也可以查看我的 app.component.html，如下所示

<app-home *ngIf="router.url == '/'"></app-home>
<app-featured-blog *ngIf="router.url == '/'"></app-featured-blog>
<router-outlet></router-outlet>
<app-footer></app-footer>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
const routes: Routes = [
{path: '', redirectTo: '', pathMatch: 'full'},
{path: '**', component: PageNotFoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

每当我尝试访问我创建的路线时，只会加载页脚，没有其他内容。主页运行良好。

【问题讨论】：

您是否遇到任何错误？
no.. 控制台中没有任何内容
你的 app.component.html 中有 <router-outlet></router-outlet> 吗？

标签： angular-routing angular8

【解决方案1】：

抱歉，我还不能对问题发表评论。我想知道根模块如何知道使用子路由。您不需要告诉根路由路径何时加载子路由路径吗？我所有的子路由都使用这样的行加载：

{ path: '', loadChildren: () => import('./client/client-routing/client.module').then(m => m.ClientModule) }

【讨论】：

【解决方案2】：

通过在 NgModule 中添加“enableTracing: true”来启用路由跟踪

imports: [RouterModule.forRoot(routes, { enableTracing: true })]

有助于解决路由器相关问题

【讨论】：