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

Posted 2023-02-22

【中文标题】路由在角度 6 中无法正常工作

【英文标题】：Routing not working properly in angular 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

<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>

【参考方案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)