ngx-toastr, тост не отображается в Angular 7 - PullRequest
Новая
       14

ngx-toastr, тост не отображается в Angular 7

0 голосов
/ 31 декабря 2018

В настоящее время я разрабатываю веб-приложение с использованием Angular 7. Я хотел включить ngx-toastr для отправки уведомлений пользователям, но оно не работает должным образом.Когда я запускаю тост, ничего не происходит, за исключением прямоугольника размером с тост, который появляется в правом нижнем углу, но только когда курсор находится над ним.Следуя примеру того, как я запускаю функцию toastr.Тест вызывается нажатием кнопки.

import {ToastrService} from 'ngx-toastr';
@Component({
  selector: 'app-action-controls',
  templateUrl: './action-controls.component.html',
  styleUrls: ['./action-controls.component.scss']
})
export class Notification implements OnInit {
  test(){   
          this.toast.success("I'm a toast!", "Success!");
  }
 constructor(private toast: ToastrService) { }
}

Я включил библиотечные css-файлы в файл angular.json в свой проект, например: 

     ...        
     "styles": [
        "src/styles.scss",
        "node_modules/bootstrap/scss/bootstrap.scss",
        "node_modules/ngx-toastr/toastr.css"
      ],
      ...

И вот так в моем файле app.module.ts: 

...
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToastrModule} from 'ngx-toastr';
...
  imports: [
    ...
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      timeOut: 1000,
      positionClass: 'toast-bottom-right'
    })
   ]
...

Я не могу понять, что я делаю неправильно, у кого-нибудь был подобный опыт?Большое спасибо заранее!

Ответы [ 7 ]

0 голосов
/ 19 июля 2019

Когда я читаю эту ветку, думаю, вы могли бы решить вашу проблему.Тем не менее, я бы оставил решение моей проблемы здесь, если кто-то не может иметь то же самое, что и мы.

Что я сделал, чтобы решить эту проблему: добавить @import '~ngx-toastr/toastr.css'; в style.css в корневом каталогепроект избавится от проблемы.

0 голосов
/ 22 июля 2019

У меня была эта проблема, и я заметил, что она работала, но не отображала CSS должным образом, поэтому я проверил папку node_modules / toastr и понял, что есть другие файлы CSS, попробуйте включить все файлы CSS, потому что это работает длямне.

добавьте файлы css в файл angular.json и попробуйте снова запустить приложение yoru. 

 "styles": [              
          "./src/assets/css/bootstrap.min.css",
          "......",              
          "./node_modules/ngx-toastr/toastr.css",
          "./node_modules/ngx-toastr/toastr-old.css",
          "./src/styles.css",
          ".......",
          "......",
          "./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
       ],
0 голосов
/ 21 марта 2019

Я знаю, что этому вопросу 3 месяца, но я просто информирую всех о последних изменениях.У ngx-toastr v10.0.2 больше нет этой ошибки с начальной загрузкой v4.2.1

, поэтому обновление ngx-toastr должно решить эту проблему.Это сделал для меня:)

https://github.com/scttcper/ngx-toastr/releases

0 голосов
/ 20 февраля 2019

Даже после добавления кода непрозрачности CSS из приведенных выше ответов в мой глобальный style.scss это не решило мою проблему полностью;Я получаю пустую белую коробку.

После добавления дополнительного CSS, упомянутого в этом GitHub посте , тосты работают правильно.

Соответствующий код из вышеупомянутого постаниже: 

/* TOASTR BUGFIX */
#toast-container > div {
  opacity: 1;
}
.toast {
  font-size: initial !important;
  border: initial !important;
  backdrop-filter: blur(0) !important;
}
.toast-success {
  background-color: #51A351 !important;
}
.toast-error {
  background-color: #BD362F !important;
}
.toast-info {
  background-color: #2F96B4 !important;
}
.toast-warning {
  background-color: #F89406 !important;
}
0 голосов
/ 07 февраля 2019

Альтернатива Ответы Кинана Диггса предоставляет дополнительный класс стилей в определении ToastrModule, который устанавливает непрозрачность 1. IMO, это немного более ясно, чего мы пытаемся достичь, а также нет.не должен зависеть от # toast-container.

app.module.ts: 

ToastrModule.forRoot({
  toastClass: 'toast toast-bootstrap-compatibility-fix'
}),

Не забудьте оригинальный toast класс.

Ваш(s) css файл: 

.toast-bootstrap-compatibility-fix {
  opacity:1;
}
0 голосов
/ 15 января 2019

Это тесно связано с новой версией начальной загрузки, которая поставляется с Toasts.Вот проблема, обсуждающая это:

https://github.com/ng-bootstrap/ng-bootstrap/issues/2945

Я сам сохранил «старую» версию 4.1.3 начальной загрузки и буду следить за следующей версией ng-bootstrap, таким образом яне взламывайте CSS:) 

#toast-container > div {
  opacity:1;
}
0 голосов
/ 31 декабря 2018

Мне удалось минимально воспроизвести вашу проблему, и я не вижу никаких проблем: https://stackblitz.com/edit/angular-avcidu

Возможно, у вас есть несколько пользовательских стилей, которые конфликтуют со стилями toastr.cssили шаблон, который искажен (например, незакрытый div)?

Используете ли вы последнюю версию ngx-toastr?(9.1.1 на момент написания этого поста)

Как выглядит ваш шаблон?

Обновление:

В предыдущем стековом блице теперь отображалась проблема с репликацией.Вот снова ссылка: https://stackblitz.com/edit/angular-avcidu

Похоже, что и bootstrap, и ngx-toastr используют класс .toastr, что влияет на свойство непрозрачности в div toastr.

Этот поток имеет работоспособный ответ: Задание непрозрачности toastr?

Ответ заключается в том, чтобы принудительно установить непрозрачность 1. Добавьте эту свою пользовательскую таблицу стилей: 

#toast-container > div {
    opacity:1;
}

А вот рабочий стек бликов: https://stackblitz.com/edit/angular-gjazzq

...