TypeError：_this.flashMessagesService.show不是函数

Question

尝试使用angular2-flash-messages并获取控制台错误_this.flashMessagesService.show不是函数

按照https://github.com/moff/angular2-flash-messages

的步骤进行操作

app.modules.ts

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

imports: [
    BrowserModule,
    FormsModule,
    FlashMessagesModule.forRoot(),
    RouterModule.forRoot(appRoutes)

signin.component.ts有

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

signin.component.ts构造函数具有：

constructor(
private authService: AuthService,
private router: Router,
private flashMessagesService: FlashMessagesService
) { }

onSubmit() {
this.authService.signin(this.email, this.password)
.then((res) => {
this.flashMessagesService.show('You are signed in', {
cssClass: 'alert-success', timeout: 4000
});
this.router.navigate(['/']);
})
.catch((err) => {
this.flashMessagesService.show(err.message, {
cssClass: 'alert-danger', timeout: 4000
});
this.router.navigate(['/signin']);
});
}

并获取错误_this.flashMessagesService.show不是函数

Answer 1

   // put it inside of onSubmit() method
   var flashMessagesService = this.flashMessagesService;

  // and call it inside your .then function
  // Success
    flashMessagesService.show('You are signed in', {
       cssClass: 'alert-success', timeout: 4000
   });
  // Error
   flashMessagesService.show(err.message, {
      cssClass: 'alert-danger', timeout: 4000
   });

您可以在此处查看https://github.com/moff/angular2-flash-messages/issues/35

Answer 2

添加代码

<flash-messages></flash-messages>

在app.component.html文件中。