作为一个新手,我在Angular 2中设置路线时遇到问题.
虽然我很确定,但这是我非常缺乏的基础.
我想要的只是我的App组件加载并显示标题.在它下面,一个链接将加载路由器插座部分中的联系人列表组件.
import { Component,OnInit } from '@angular/core';
import { Contact } from './contact';
@Component({
selector: 'app-root',
template: `
<h1>{{title}}</h1>
<a routerLink="/contact-list">Contact List</a>
<router-outlet></router-outlet>
`
})
export class AppComponent{
title = 'Welcome to my Dream App!';
}
这是app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ContactCardComponent } from './contact-card.component';
import { ContactsListComponent } from './contacts-list.component';
RouterModule.forRoot([
{
path:'',
redirectTo:'app',
pathMatch:'full',
},
{
path:'app',
component:AppComponent
},
{
path:'contact-list',
component:ContactsListComponent
},
{
path:'contact-details/:id',
component:ContactCardComponent
}
]);
@NgModule({
declarations: [
AppComponent,
ContactsListComponent,
ContactCardComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
但是说:
error_handler.js:54 EXCEPTION:./AppComponent类中的错误AppComponent – 内联模板:2:4导致:没有Router的提供程序!
没有路由器提供商.
我究竟做错了什么 ?
更新:
如果我做 :
template: `
<h1>{{title}}</h1>
<contacts-list></contacts-list>
`
在app.component.ts中,它工作正常.
解决方案发布后,我看到重复的行:
解决方法:
您应该将RouterModule导入模块定义和“导入”数组:
const ROUTES = [
// HERE ROUTES DEFINITIONS
]
@NgModule({
imports: [
RouterModule.forChild(ROUTES)
],
declarations: [],
providers: []
})
export default class YourModuleDefinition{
}
所以你的代码应该是这样的:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ContactCardComponent } from './contact-card.component';
import { ContactsListComponent } from './contacts-list.component';
@NgModule({
declarations: [
AppComponent,
ContactsListComponent,
ContactCardComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot([
{
path:'',
redirectTo:'app',
pathMatch:'full',
},
{
path:'app',
component:AppComponent
},
{
path:'contact-list',
component:ContactsListComponent
},
{
path:'contact-details/:id',
component:ContactCardComponent
}
]);
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
具有提供的配置并添加到imports数组的RouterModule的forRoot静态类方法提供了模块的路由问题.
更多信息:https://angular.io/guide/ngmodule
原文地址:https://codeday.me/bug/20190522/1153721.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。