路由在角度 6 中无法正常工作答案

【问题标题】：Routing not working properly in angular 6路由在角度 6 中无法正常工作
【发布时间】：2019-03-18 22:27:55
【问题描述】：

我正在开发一个包含三个组件的小型 Angular 项目。该项目是否有一个名为 component.module 的子模块，并且我在该模块中添加了路由，并且 component.module 包含到 App.module。

它正在编译，没有任何错误，但屏幕上没有任何显示（见下图）。

我的项目文件夹结构是这样的。

components/app-routing.module.ts

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { RouterModule, Routes } from "@angular/router";

import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentListComponent, IntentCreateComponent } from "./intent";

const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  {
    path: "home",
    component: MainLayoutComponent,
    children: [
      { path: "list", component: IntentListComponent },
      { path: "create", component: IntentCreateComponent }
    ]
  } 
];

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

components/component.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentCreateComponent, IntentListComponent } from "./intent";

import { ProjectCreateComponent } from "./project";

@NgModule({
  declarations: [
    MainLayoutComponent,
    IntentCreateComponent,
    IntentListComponent,
    ProjectCreateComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: []
})
export class ComponentModule {}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ComponentModule } from "./components/component.module";



@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    ComponentModule,

  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule {}

app.component.html

&lt;app-main-layout&gt;&lt;/app-main-layout&gt;

app/components/main-layout/main-layout.component.html

<div class="side-bar">
</div>
  
<div class="content-wrapper">
  <router-outlet></router-outlet>
</div>

【问题讨论】：

标签： angular typescript routing

【解决方案1】：

如果您不从 ComponentModule 模块中导出任何内容，那么将其导入您的 AppModule 将不会从 ComponentModule 中获得任何内容。

由于您在AppModule 中使用ComponentModule 中的Routing 和MainLayoutComponent，因此您还必须将它们添加到exports 的exports 数组中。

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";
import { MainLayoutComponent } from "./main-layout/main-layout.component";
import { IntentCreateComponent, IntentListComponent } from "./intent";

import { ProjectCreateComponent } from "./project";

@NgModule({
  declarations: [
    MainLayoutComponent,
    IntentCreateComponent,
    IntentListComponent,
    ProjectCreateComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    AppRoutingModule
  ],
  providers: [],
  exports: [AppRoutingModule, MainLayoutComponent]
})
export class ComponentModule {}

PS：如果您想将 ComponentModule 中的任何内容用于您的 AppModule，您必须将其从您的 ComponentModule 中导出，方法是将其添加到 exports 数组中你的ComponentModule。

【讨论】：

【解决方案2】：

你的路线配置应该是这样的：

const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  {
    path: "home",
    component: MainLayoutComponent,
    children: [
      { path: "", component: IntentListComponent },
      { path: "create", component: IntentCreateComponent },
  ]
  }];

或

    const routes: Routes = [
  { path: "", redirectTo: "/home", pathMatch: "full" },
  {
    path: "home",
    component: MainLayoutComponent,
    children: [
      { path: "list", component: IntentListComponent },
      { path: "create", component: IntentCreateComponent },
      { path: "", redirectTo: "list" pathMatch: "full" }
  ]
  }];

当您的组件被加载时，但视图中没有任何内容。但至于您的配置，如果您路由到 /home/list 或 /home/create 将加载该组件

【讨论】：

【解决方案3】：

如果组件模块是功能模块，那么你必须写：

RouterModule.forChild(routes)

而不是

RouterModule.forRoot(routes)

【讨论】：