繁体   English   中英

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

[英]Error: NullInjectorError: No provider for FlashMessagesService

当用户点击退出按钮时,我正在使用Angular 2 flash消息来显示消息。 我在navbar.component.ts中添加了提供程序 ,还有一些其他实验,但面临同样的错误。

以下是我执行的步骤:

第1步:

 npm install angular2-flash-messages --save

第2 app.module.ts

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

    @NgModule({
        imports: [
            // other imports
            // ...
            FlashMessagesModule,
            // ...
        ]
    })

第3步:app.component.html

<app-navbar></app-navbar>

<div class="container">
  <flash-messages></flash-messages>
  <router-outlet></router-outlet>
</div>

第4步: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(['/']);
  }
}

第5步:navbar.component.html

<li><a href="#" (click)="onLogoutClick()" >Logout</a></li>        

错误图片

使用forRoot()方法返回NgModule及其提供程序依赖项

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

    @NgModule({
    imports: [
        // other imports
        // ...
        FlashMessagesModule.forRoot(),
        // ...
    ]
})

检查一下: https//github.com/moff/angular2-flash-messages

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM