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

В настоящее время я разрабатываю веб-приложение с использованием 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'
    })
   ]
...

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

ОТВЕТЫ

Ответ 1

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

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

Вы используете последнюю версию ngx-toastr? (9.1.1 на момент публикации)

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

Обновить:

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

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

В этой теме есть действенный ответ: настройка непрозрачности toastr?

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

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

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

Ответ 2

Даже после добавления кода непрозрачности 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;
}

Ответ 3

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

app.module.ts:

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

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

Ваш (и) файл CSS:

.toast-bootstrap-compatibility-fix {
  opacity:1;
}

Ответ 6

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

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

Ответ 7

У меня была эта проблема, и я заметил, что она работала, но не рендерил 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"
       ],