[英]Why is my Angular 2 router not rendering my component?
I am new to Angular 2, and am trying to get it to render a view component that holds other templates/components. 我是Angular 2的新手,正在尝试使其呈现包含其他模板/组件的视图组件。 This is what I want rendered on the /home route. 这就是我要在/ home路由上呈现的内容。 Problem : When I go to the /home route, it goes to a blank page rather than rendering my templates. 问题 :当我转到/ home路由时,它将转到空白页面而不是呈现我的模板。 There's no errors in the console. 控制台中没有错误。
Here is my home.component.html : 这是我的home.component.html :
<router-outlet></router-outlet>
<container>
<header-component></header-component>
<check-portfolio></check-portfolio>
<portfolio-carousel></portfolio-carousel>
<skill-section></skill-section>
<need-help></need-help>
</container>
home.component.ts home.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Here are some parts of my app.module.ts . 这是我的app.module.ts的某些部分。 I'm not sure if I need anything in my app.component.html , but it's blank: 我不确定app.component.html中是否需要任何内容,但它为空白:
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
}
]
@NgModule({
declarations: [
AppComponent,
Container,
Header,
CheckPortfolioComponent,
PortfolioCarouselComponent,
SkillSectionComponent,
NeedHelpComponent,
FooterComponent,
AboutComponent,
HomeComponent,
TitleNavComponent,
],
imports: [
BsDropdownModule.forRoot(),
BrowserModule,
CarouselModule.forRoot(),
RouterModule.forRoot(
appRoutes,
{ enableTracing: true }
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is my index.html: 这是我的index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>LucidWebDream</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<script>
window.__theme = 'bs4';
</script>
<app-root></app-root>
</body>
</html>
I've tried putting my home component into the bootstrap array, but had no luck as well. 我曾尝试将home组件放入bootstrap数组,但也没有运气。
Update: Here is the git repo if that helps: 更新:这是git repo,如果有帮助的话:
您应该将<router-outlet></router-outlet>
放在app.component.html
因为您的应用程序现在会引导AppComponent
,即使您定义了路由,它也不知道下一步要做什么,因为您没有<router-outlet></router-outlet>
在入口点中。
you route should look like this: 您的路线应如下所示:
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' }
{ path: 'home', component: HomeComponent },
{ path: '**', component: PageNotFoundComponent }, // default route for page not found
]
that route going to display the component in the main router-outlet from your app, if you want to display others components using the router-outlet from home component, you should write de router like this 该路线将在您的应用程序的主路由器出口中显示该组件,如果您想使用本地组件的路由器出口显示其他组件,则应这样编写de router
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' }
{ path: 'home', component: HomeComponent, children:[
{ path: 'list', component: ListComponent }
] },
{ path: '**', component: PageNotFoundComponent }, // default route for page not found
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.