Angular 错误:NullInjectorError:没有FlashMessagesService的提供程序

Angular 错误:NullInjectorError:没有FlashMessagesService的提供程序,angular,mean-stack,angular2-flashmessages,Angular,Mean Stack,Angular2 Flashmessages,当用户单击注销按钮时,我使用Angular 2 flash messages显示消息。我在navbar.component.ts和其他一些实验中添加了提供程序,但遇到了相同的错误 以下是我执行的步骤: npm install angular2-flash-messages --save 步骤1: npm install angular2-flash-messages --save 第二步: 应用程序模块.ts import { FlashMessagesModule } from 'a

当用户单击注销按钮时,我使用Angular 2 flash messages显示消息。我在navbar.component.ts和其他一些实验中添加了提供程序,但遇到了相同的错误

以下是我执行的步骤:

 npm install angular2-flash-messages --save
步骤1:

 npm install angular2-flash-messages --save
第二步: 应用程序模块.ts

 import { FlashMessagesModule } from 'angular2-flash-messages';

    @NgModule({
        imports: [
            // other imports
            // ...
            FlashMessagesModule,
            // ...
        ]
    })
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(['/']);
  }
}
步骤3: app.component.html

<app-navbar></app-navbar>

<div class="container">
  <flash-messages></flash-messages>
  <router-outlet></router-outlet>
</div>
<li><a href="#" (click)="onLogoutClick()" >Logout</a></li>        
步骤5: navbar.component.html

<app-navbar></app-navbar>

<div class="container">
  <flash-messages></flash-messages>
  <router-outlet></router-outlet>
</div>
<li><a href="#" (click)="onLogoutClick()" >Logout</a></li>        
  • Use forRoot()方法返回NgModule及其提供程序依赖项

     import { FlashMessagesModule } from 'angular2-flash-messages';
    
        @NgModule({
        imports: [
            // other imports
            // ...
            FlashMessagesModule.forRoot(),
            // ...
        ]
    })
    

    检查此项:

    您能解释为什么需要forRoot()吗?forRoot()方法返回一个NgModule及其提供程序依赖项