我正在尝试使用Angular flash消息模块,如本文所示: https://www.npmjs.com/package/angular-flash-message
然而,我收到此错误:
> compiler.js:485 Uncaught Error: Template parse errors:
> 'flash-messages' is not a known element:
>
> 1. If 'flash-messages' is an Angular component, then verify that it is part of this module.
> 2. If 'flash-messages' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component
> to suppress this message. ("<app-navbar></app-navbar><div
> class="container">[ERROR
> ->]<flash-messages></flash-messages><router-outlet></router-outlet> </div>"): ng:///AppModule/AppComponent.html@2:8
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { LoginComponent } from './components/login/login.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ProfileComponent } from './components/profile/profile.component';
import { RegisterComponent } from './components/register/register.component';
import { ValidateService } from './services/validate.service';
import {FlashMessageModule} from 'angular-flash-message'
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
LoginComponent,
HomeComponent,
DashboardComponent,
ProfileComponent,
RegisterComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule,
FormsModule,
FlashMessageModule
],
providers: [ValidateService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<app-navbar></app-navbar>
<div class="container">
<flash-messages></flash-messages>
<router-outlet></router-outlet>
</div>
registration.component.ts
import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ValidateService } from '../../services/validate.service';
import { FlashMessage } from 'angular-flash-message';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
name: String;
username: String;
email: String;
password: String;
constructor(
private validateService: ValidateService,
private flashMessage: FlashMessage
) { }
ngOnInit() {
}
onRegisterSubmit(){
const user = {
name: this.name,
username: this.username,
email: this.email,
password: this.password
}
//Required fields
if(!this.validateService.validateRegister(user)){
//fill in all fields
this.flashMessage.info("Incorrect!")
return false;
}
if(!this.validateService.validateEmail(user.email)){
//email incorrect
return false;
}
}
}
我正在尝试在验证用户输入后显示Flash消息。 我是Angular和MEAN应用程序的新手,这实际上是使用Angular 2的教程中显示的应用程序。
有人可以帮帮我吗?谢谢!
答案 0 :(得分:1)
我不确定
import {FlashMessageModule} from 'angular-flash-message'
正常工作。我建议使用
import {FlashMessageModule} from 'angular2-flash-messages'`.
他们的文件在这里:https://www.npmjs.com/package/angular2-flash-messages
我浏览了angular-flash消息文档,angular2-flash-message文档(最后没有&#39; s),还有angular2-flash-messages(带有&#39; s& #39;最后),唯一适合我的是最后一个。
答案 1 :(得分:1)
另外,除了你的导入之外,我还发现确保安装了@ angular / common是有帮助的,以防万一:
npm install @angular/common --save
希望这有帮助
答案 2 :(得分:0)
哦,我认为不应该
错误
imports: [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes), AngularFireModule.initializeApp(fireBase), FlashMessagesModule ],
应该是
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(appRoutes),
AngularFireModule.initializeApp(fireBase),
FlashMessagesModule.forRoot()
],
我也遇到了同样的问题,并通过在导入中添加FlashMessageModule.forRoot()
来解决了这个问题