我正在使用angular 7,并从此link安装ng6-toastr-notifications应用
我添加了尽可能多的这段代码。这是我的简化的app.module.ts文件:
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'
import { ToastrModule } from 'ng6-toastr-notifications'
import { JwtInterceptor, ErrorInterceptor } from './_helpers';
import { LogoffComponent } from './logoff/logoff.component';
import { ToasterComponent } from './_helpers/toaster/toaster.component'
@NgModule({
declarations: [
AppComponent,
StocksComponent,
LoginComponent,
LoginHomeComponent,
HomeComponent,
NavComponent,
RegisterComponent,
LogoffComponent,
ToasterComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
MatButtonModule,
MatInputModule,
MatCardModule,
MatToolbarModule,
FormsModule,
ReactiveFormsModule,
MatListModule,
AppRoutingModule,
ToastrModule.forRoot()
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
这是ToasterComponent.ts代码:
import { Component} from '@angular/core';
import { ToastrManager } from 'ng6-toastr-notifications'
@Component({
selector: 'app-toaster',
templateUrl: './toaster.component.html',
styleUrls: ['./toaster.component.css']
})
export class ToasterComponent {
constructor(public toastr: ToastrManager) { }
showSuccess() {
this.toastr.successToastr('This is success toast.', 'Success!');
}
show401Error() {
this.toastr.errorToastr('invalid authentication credentials');
}
我没有使用Visual Studio Code遇到编译错误。我在Google Chrome浏览器控制台窗口中看到错误,如下所示:
ERROR Error: StaticInjectorError(AppModule)[InjectionToken
HTTP_INTERCEPTORS -> ToasterComponent]:
StaticInjectorError(Platform: core)[InjectionToken HTTP_INTERCEPTORS ->
ToasterComponent]:
NullInjectorError: No provider for ToasterComponent!
这是error.interceptor.ts 从'@ angular / core'导入{可注射};
import { ToasterComponent } from './toaster/toaster.component'
import { AuthenticationService } from '../_services';
@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
constructor(private authenticationService: AuthenticationService,
public toaster: ToasterComponent) {}
intercept(request: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
return next.handle(request).pipe(catchError(err => {
if (err.status === 401 ) {
// send message to the client
// auto logout if 401 response returned from api
this.authenticationService.logout();
location.reload(true);
}
const error = err.error.message || err.statusText;
return throwError(error);
}))
}
}
答案 0 :(得分:0)
将可注射剂添加到我的代码中可以消除错误:
import { Injectable } from '@angular/core';
import { Component} from '@angular/core';
import { ToastrManager } from 'ng6-toastr-notifications'
@Component({
selector: 'app-toaster',
templateUrl: './toaster.component.html',
styleUrls: ['./toaster.component.css']
})
@Injectable({ providedIn: 'root' })
export class ToasterComponent {
constructor(public toastr: ToastrManager) { }
showSuccess() {
this.toastr.successToastr('This is success toast.',
'Success!');
}
show401Error() {
this.toastr.errorToastr('invalid authentication
credentials');
}