我正在开发一个包含三个组件的小型 Angular 项目。那个项目我有一个名为 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 {}
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>
最佳答案
如果您不从 ComponentModule
导出任何内容模块,然后将其导入您的 AppModule
不会从 ComponentModule
给它任何东西.
由于您使用的是 Routing
和 MainLayoutComponent
来自您的ComponentModule
在您的 AppModule
,您必须将这些添加到 exports
ComponentModule
的数组也是。
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
的数组.
关于angular - 路由在 Angular 6 中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52800719/