Как добавить тостер в Angular?
Любая идея, как добавить уведомление тостера при возникновении ошибки вместо использования предупреждения. Многие учебники просто создают учебник при нажатии кнопки, но я хочу некоторой автоматизации. Ниже мой код
saveStudentDetails(values) {
const studentData = {};
studentData['id'] = values.id;
studentData['password'] = values.password;
this.crudService.loginstudent(studentData).subscribe(result => {
this.student = result;
this.router.navigate(['/address']);
},
err => {
console.info('status code ->' + err.status);
alert('Please try again');
});
}
Любая идея, как я могу создать уведомление об ошибке тостера на основе этого кода? Спасибо
оу, я уже использовал MDBoostrap, но в документации мне все еще нужно нажать кнопку, чтобы всплыло уведомление. У вас есть идеи, как сделать так, чтобы он появлялся только при возникновении ошибки?
Ответы 3
Вы можете использовать любые сторонние пакеты тостеров, такие как ngx-тоастр, для отображения уведомления об ошибках тостера.
Например, с ngx-toastr:
constructor(
...
private toastr: ToastrService
) {}
this.crudService.loginstudent(studentData).subscribe(
result => {
this.student = result;
this.router.navigate(['/address']);
this. toastr.success('Logged in');
},
err => {
console.info('status code ->' + err.status);
this. toastr.error('Please try again');
}
);
Для отображения тостера используйте библиотеку ngx-тоастр
Шаги:
1) npm install ngx-toastr --save
2) Следуйте другим настройкам из здесь
Быстрый код:
import { ToastrService } from 'ngx-toastr';
constructor(private toastr: ToastrService) {}
saveStudentDetails(values) {
const studentData = {};
studentData['id'] = values.id;
studentData['password'] = values.password;
this.crudService.loginstudent(studentData).subscribe(result => {
this.student = result;
this.router.navigate(['/address']);
},
err => {
console.info('status code ->' + err.status);
this.toastr.error('Hello world!', 'Toastr fun!');
});
Вы можете использовать тостр. Дополнительную информацию можно найти на странице https://www.npmjs.com/package/toastr. Демо находится по адресу https://codeseven.github.io/toastr/demo.html.
Если вы еще не внедрили стороннюю библиотеку дизайна, вы можете использовать material.angular.io/components/snack-bar/обзор, она содержит много полезного.