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

Question

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

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

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

组件/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 {}

组件/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 {}

应用程序组件.html

<app-main-layout></app-main-layout>    

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

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

Answer 1

如果你没有从你的ComponentModule模块中导出任何东西，那么在你的模块中导入它AppModule不会从ComponentModule.

由于您在您的中使用Routing和，因此您还必须将这些添加到 的数组中。MainLayoutComponentComponentModuleAppModuleexportsComponentModule

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。