angular - 为什么我的路由器插座不能用于 Angular CLI 项目?
问题描述
第一次使用 Angular CLI,我是新来的类型脚本。
我在使用生成 Angular 项目的基本 CLI 时遇到问题。
基本上<router-outlet></router-outlet>
没有填充任何内容。
以下是我的代码。如果发现并解释了问题,将不胜感激...
+ app
|- app-routing.module.ts
|- app.component.css
|- app.component.html
|- app.component.spec.ts
|- app.component.ts
|- app.module.ts
|-+ homepage
|- homepage-routing.module.ts
|- homepage.module.ts
|-+ home
|- home.component.css
|- home.component.html
|- home.component.spec.ts
|- home.component.ts
home.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
主页路由.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{path : '', component : HomeComponent}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomepageRoutingModule { }
主页.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomepageRoutingModule } from './homepage-routing.module';
import { HomeComponent } from './home/home.component';
// import { FooterComponent } from './footer/footer.component';
@NgModule({
declarations: [HomeComponent],
imports: [
CommonModule,
HomepageRoutingModule
]
})
export class HomepageModule { }
应用程序路由.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{path : 'home', loadChildren : './homepage/homepage.module'},
{path : '', redirectTo : '/home', pathMatch : 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<p>Application loaded</p>
<router-outlet></router-outlet>
home.component.html
<div class="content">
<h2>
Home Dashboard
</h2>
<section>
Welcome to the Home component inside the
Home module.
Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
impedit quo minus id quod maxime placeat facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus.
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
</section>
</div>
解决方案
使用此语法:
{
path : 'home',
loadChildren : './homepage/homepage.module#HomepageModule',
},
推荐阅读
- c# - 所有任务都被 ContinueWith [C#].. 阻止,同时调用 Task.Delay 等待应该由其他任务更改的值
- javascript - Chrome 没有加载所有 webpack JS 源文件,但 Firefox + Chrome Incognito 可以
- java-8 - 使用 Java 8,使用 Stream 将类型嵌套列表转换为另一种类型
- path - 错误:找不到工作的 QEMU 可执行文件
- python - 使用python中的正则表达式在C中获取函数内容和函数名
- css - preserve-3d 不适用于子元素
- kotlin - 如何在 tornadofx 中添加 MDI 父级
- templates - 如果 YooTheme ZOO 如何自定义布局?
- python - 使用python ftp下载文件时如何确定路径
- api - 我正在尝试使用 Postman 上的 twitters API 从特定用户那里获取最近的推文,但在使用 OAuth2 时遇到了问题