Error: NullInjectorError: No provider for FlashMessagesService
Error: NullInjectorError: No provider for FlashMessagesService
我正在使用 Angular 2 条闪烁消息 在用户单击 注销 按钮时显示消息。我在 navbar.component.ts 中添加了 provider 和一些其他实验,但面临同样的错误。
以下是我执行的步骤:
第一步:
npm install angular2-flash-messages --save
第二步:
app.module.ts
import { FlashMessagesModule } from 'angular2-flash-messages';
@NgModule({
imports: [
// other imports
// ...
FlashMessagesModule,
// ...
]
})
第三步:
app.component.html
<app-navbar></app-navbar>
<div class="container">
<flash-messages></flash-messages>
<router-outlet></router-outlet>
</div>
第四步:
navbar.component.ts
import { Component} from '@angular/core';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
constructor(private _auth: AuthService, private flashMessagesService: FlashMessagesService, private _router: Router) { }
onLogoutClick() {
this._auth.logout();
this.flashMessagesService.show('You are logged out', { cssClass: 'alert-info'});
this._router.navigate(['/']);
}
}
第五步:
navbar.component.html
<li><a href="#" (click)="onLogoutClick()" >Logout</a></li>
使用 forRoot() 方法returns 一个 NgModule 及其提供者依赖项
import { FlashMessagesModule } from 'angular2-flash-messages';
@NgModule({
imports: [
// other imports
// ...
FlashMessagesModule.forRoot(),
// ...
]
})
我正在使用 Angular 2 条闪烁消息 在用户单击 注销 按钮时显示消息。我在 navbar.component.ts 中添加了 provider 和一些其他实验,但面临同样的错误。
以下是我执行的步骤:
第一步:
npm install angular2-flash-messages --save
第二步: app.module.ts
import { FlashMessagesModule } from 'angular2-flash-messages';
@NgModule({
imports: [
// other imports
// ...
FlashMessagesModule,
// ...
]
})
第三步: app.component.html
<app-navbar></app-navbar>
<div class="container">
<flash-messages></flash-messages>
<router-outlet></router-outlet>
</div>
第四步: navbar.component.ts
import { Component} from '@angular/core';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
constructor(private _auth: AuthService, private flashMessagesService: FlashMessagesService, private _router: Router) { }
onLogoutClick() {
this._auth.logout();
this.flashMessagesService.show('You are logged out', { cssClass: 'alert-info'});
this._router.navigate(['/']);
}
}
第五步: navbar.component.html
<li><a href="#" (click)="onLogoutClick()" >Logout</a></li>
使用 forRoot() 方法returns 一个 NgModule 及其提供者依赖项
import { FlashMessagesModule } from 'angular2-flash-messages';
@NgModule({
imports: [
// other imports
// ...
FlashMessagesModule.forRoot(),
// ...
]
})