Я пытаюсь внедрить в свое приложение ng2-toastr. Я на "@angular/compilercli": "^4.3.6",. У меня есть следующий перехватчик для перехвата ошибок из HTTP.

 export class InterceptorService implements HttpInterceptor {
  constructor(public toastr:ToastsManager) {
  }
  intercept(req:HttpRequest<any>,
            next:HttpHandler):Observable<HttpEvent<any>> {
    //Inspection removed for this file for rxjs.
    //noinspection TypeScriptValidateTypes
    return next.handle(req).do(evt => {
      if (evt instanceof HttpResponse) {
        this.toastr.success('You are awesome!', 'Success!');
        console.log('---> status:', evt.status);
        // console.log('---> filter:', req.params.get('filter'));
      }
    }, err => {
      if (err instanceof HttpErrorResponse) {
        this.toastr.error('This is not good!', 'Oops!');
        //toastr here
      }
      console.log(err);
    });

  }
}

И в моем компоненте я устанавливаю свой RootViewContainerRef после импортинга ToastModule.forRoot() в моем @NgModule объявлении.

constructor( public toastr: ToastsManager, vRef: ViewContainerRef) {
  this.toastr.setRootViewContainerRef(vRef);
}

По какой-то причине он прекрасно компилируется, и я также вижу журнал из строки console.log('---> status:', evt.status); служб в консоли, но не вижу ни одного отображаемого тостера. Однако я вижу контейнер тостов, когда проверяю компонент в браузере. Я не знаю, что мне здесь не хватает. Любое руководство будет оценено. Что не так с моей реализацией?

0
Dinesh Devkota 28 Авг 2017 в 18:14

4 ответа

Лучший ответ

Angular был обновлён до 4.1.1 и, похоже, некоторые проблемы с анимацией исправлены. Давайте попробуем обновить до 4.1.1 и посмотреть, если у вас все еще есть проблемы.

0
Null 18 Сен 2017 в 07:23

Привет, ваш InterceptorService сам добавляет это объявление, нет необходимости добавлять компонент

constructor( public toastr: ToastsManager, vRef: ViewContainerRef) {
        this.toastr.setRootViewContainerRef(vRef);
}

Не забывайте делать это ToastModule.forRoot () в моем @NgModule , он должен работать

0
Robert 28 Авг 2017 в 17:50

Однако я вижу контейнер тостов, когда проверяю компонент в браузере.

У этого контейнера для тостера есть style = "display: none;" ? Поскольку с угловых 4.3.5 до 4.3.6 что-то изменилось с анимациями, я также столкнулся с некоторой проблемой с анимациями, компонент отображается и должен исчезнуть, но он настроен на отображение: нет.

Если вы увидите display: none, это означает, что что-то не так с анимацией.

0
Null 29 Авг 2017 в 08:33

У меня была такая же проблема в Angular 4.2

Попробуйте добавить ниже. он должен работать..

@import '../node_modules/ng2-toastr/ng2-toastr.css'; to ./src/app/theme/theme.cscc

0
Prabakar Veer 30 Окт 2017 в 03:41