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

Question

我正在开发一个包含三个组件的小型角度项目。该项目有一个名为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

<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中使用MainLayoutComponent中的ComponentModule和AppModule，因此必须将它们添加到{ exports。

ComponentModule

PS：：如果要将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 {} 中的任何内容用于ComponentModule中，则必须通过添加将其从AppModule中导出到ComponentModule的{​​{1}}数组中。

Answer 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，则将加载该组件

Answer 3

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

RouterModule.forChild(routes)

代替

RouterModule.forRoot(routes)