angular - 路由器插座不渲染
问题描述
我的项目文件夹结构如下
|-- app
|-- home
|-- home-page
|--home-page.component.css
|--home-page.component.html
|--home-page.component.spec.ts
|--home-page.component.ts
|-- login
|--home-page.component.css
|--home-page.component.html
|--home-page.component.spec.ts
|--home-page.component.ts
|-- user-profile
|--user-profile.component.css
|--user-profile.component.html
|--user-profile.component.spec.ts
|--user-profile.component.ts
|-- home-routing.module.ts
|-- home.module.spec.ts
|-- home.module.ts
|-- app-routing.module.ts
|-- app.component.css
|-- app.component.html
|-- app.component.ts
|-- app.module.ts
我的home-routing.module.ts
组成如下
export const HomeRoutingModule: Routes = [
{
path: "user-profile",
children: [
{
path: "user-profile",
component:UserProfileComponent ,
data: {
title: "user-profile",
urls: [{ title: "user-profile", url: "user-profile" }]
}
}
]
}
];
app-routing.module.ts
就像下面
{ path: "home", component: LoginComponent },
{
path: "user-profile",
component: HomePageComponent,
children: [
{ path: "user-profile", loadChildren: "./home/home.module#HomeModule" },
]
}
现在我正在尝试在我尝试在 home-page.component.ts 中添加示例代码片段的user-profile.components.html
内部进行渲染,如下所示home-page.component.html
<p>this is header</p>
<router-outlet></router-outlet>
<p>this is footer</p>
我的网址如下localhost:4200/#/user-profile,但它只呈现在输出下方,除了内容
this is header
this is footer
我想我错过了一些东西,即使我无法弄清楚。任何人都可以指出,这段代码出了什么问题。
编辑: home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule, } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HomeRoutingModule } from './home-routing.module';
import { LoginComponent } from './login/login.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { HomePageComponent } from './home-page/home-page.component';
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(HomeRoutingModule),
HomeRoutingModule,
],
declarations: [UserProfileComponent, HomePageComponent]
})
export class HomeModule { }
解决方案
只需将您的更改home-routing.module.ts
为:
export const HomeRoutingModule: Routes = [
{path : "" , component : HomePageComponent},
{
path: "user-profile",
component:UserProfileComponent ,
data: {
title: "user-profile",
urls: [{ title: "user-profile", url: "user-profile" }]
}
}
];
并app-routing.module.ts
作为:
{ path: "home", component: LoginComponent },
{ path: "", loadChildren: "./home/home.module#HomeModule"} ,
并且您的路由器应该可以正常工作,即/
会加载HomeComponent
并将user-profile
加载UserProfileComponent
。
编辑
你的有一个错误home-routing.module,ts
:
import { NgModule } from '@angular/core';
import { CommonModule, } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HomeRoutingModule } from './home-routing.module';
import { LoginComponent } from './login/login.component';
import { UserProfileComponent } from './user-profile/user-profile.component';
import { HomePageComponent } from './home-page/home-page.component';
@NgModule({
imports: [
CommonModule,
HomeRoutingModule,
],
declarations: [UserProfileComponent, HomePageComponent]
})
export class HomeModule { }
你RouterModule.forChild(HomeRoutingModule)
从imports
推荐阅读
- java - 如何在 Java 中实现多线程 HttpURLConnection
- arrays - 需要帮助在 Swift 中重新组织结构数组中的数据
- android-studio - Android Studio - Gradle 同步失败:找不到 gradle-3.6.2.jar (com.android.tools.build:gradle:3.6.2)
- python - 如何将随机数打印到 tkinter 帧中?
- r - 有没有一种方法可以使用 ggmap mapdist 在 R 中一次运行多个两个数据点?
- javascript - 无法让秒表在我设定的时间停止
- php - 如何使用 webmoney 自动登录和支付
- postgresql - 将 csv 从数据库复制到新表中
- javascript - 带有打字稿的 Javascript Google Maps Api 中不存在“findPlaceFromQuery”
- c++ - 如何在函数 C++ 中返回多个值?