没有路由器的提供商? [英] No provider for Router?
问题描述
我收到此错误:
例外:./ AppComponent类AppComponent中的错误-内联
模板:0:0引起原因:没有路由器的提供商!
EXCEPTION: Error in ./AppComponent class AppComponent - inline template:0:0 caused by: No provider for Router!
这是我的应用程序组件:
This is my app component:
import {Component} from '@angular/core';
import {LoginComponent} from './login/components/login.component';
@Component({
selector: 'my-app',
template: '<login></login>',
})
export class AppComponent {
}
我在我的应用程序中尝试了此操作模块:
I tried this in my app module:
import { RouterModule } from '@angular/router';
imports: [
BrowserModule,
FormsModule,
HttpModule,
LoginModule,
RouterModule
],
bootstrap: [AppComponent, RouterModule]
但是随后出现此错误:
错误:错误:在RouterModule上找不到指令注释
Error: Error: No Directive annotation found on RouterModule
一些示例,但它们使用不推荐使用的路由器,而我没有该文件夹。我需要吗?
I found some examples but they use router-deprecated, and i dont have that folder. Do i need that or what? Any suggstion?
更新:
这是我的app.module:
This is my app.module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { LoginModule } from './login/login.module';
import { RouterModule } from '@angular/router';
//import 'rxjs/Rx';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
LoginModule,
RouterModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component:
app.component:
import {Component} from '@angular/core';
import {LoginComponent} from './login/components/login.component';
@Component({
selector: 'my-app',
template: '<login></login>',
})
export class AppComponent {
}
然后我已经登录。组件:
And then i have login.component:
import {Component, EventEmitter, Input, OnChanges} from '@angular/core';
import {Observable} from 'rxjs/Rx';
import { LoginService } from '../services/login.service';
import { Login } from '../model/login'
import {Router} from '@angular/router';
@Component({
selector: 'login',
templateUrl: 'login-form',
})
export class LoginComponent {
// Constructor with injected service
constructor(
private loginService: LoginService,
private router: Router
){}
submitLogin(values){
// Variable to hold a reference of addComment/updateComment
let loginOperation:Observable<any>;
loginOperation = this.loginService.Login(values);
loginOperation.subscribe(
function(response) { console.log("Success Response" + response)},
function(error) { console.log("Error happened" + error)},
function() {
console.log("the subscription is completed");
this.router.navigate(['/About']);
}
);
}
}
也许这行是问题所在:
Maybe problem is in this line:
this.router.navigate(['/home']);
这是我的login.module:
This is my login.module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { LoginComponent } from './components/login.component';
import { RouterModule } from '@angular/router';
import { LoginService } from './services/login.service';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
RouterModule
],
declarations: [
LoginComponent
],
providers: [
LoginService
],
exports:[
LoginComponent
]
})
export class LoginModule {
}
推荐答案
请使用此模块
RouterModule.forRoot(
[
{ path: "", component: LoginComponent}
]
)
现在只需替换您的< login>< / login>
和< router-outlet>< / router-outlet>
就是这样
now just replace your <login></login>
with <router-outlet></router-outlet>
thats it
这篇关于没有路由器的提供商?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!