Сервис для сообщений. Использование RXJS Сервис для сообщений. Использование RXJS angular rxjs alert service

Сервис для сообщений на RXJS.

Open in new window

Создание компонента уведомлений.

Источник

Создадим уведомление при неудачной попытке авторизации.

Создадим компонент в новом каталоге directives.

mkdir src/app/directives
ng g component directives/alert

Вставим шаблон.

<div *ngIf="message" [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success', 'alert-danger': message.type === 'error' }">{{message.text}}</div>
Test alert mark

Тут мы определяем css клас в зависимости от атрибута message.type.

Поменяем в компоненте селектор.

@Component({
  selector: 'alert',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.sass']
})

Вставим компонент на страницу перед выводом содержимого роутинга.

...
  <alert></alert>
  <router-outlet></router-outlet>
...

Сгенерим сервис.

ng g service directives/alert

Импортируем в сервисе инструменты роутинга и rxjs.

import { Router, NavigationStart } from '@angular/router';
import { Observable, Subject } from 'rxjs';

В роутинге мы будем подписываться на событие перехода на новый url (изменение роутинга).

router.events.subscribe(event => {...})

Определим момент начала изменения в жизненном цикле.

router.events.subscribe( event => {
  if (event instanceof NavigationStart) {
    console.log('NavigationStart');
  }
})

Определим объект Subject, которым будем отправлять событие.

private subject = new Subject<any>();

Сгенерируем событие один раз для каждого изменения роутинга

router.events.subscribe( event => {
  if (event instanceof NavigationStart) {
    console.log('NavigationStart');
    this.subject.next({ type: 'error', text: 'test message' });
  }
})

Определим функцию которая возвратит обозреваемый объект.

  getMessage(): Observable<any> {
    return this.subject.asObservable();
  }

Подпишем компонент на этот объект.

constructor(private alertService: AlertService) { }

ngOnInit() {

this.subscription = this.alertService.getMessage().subscribe(message => {
  this.message = message;
});

}

Определим в сервисе два метода для событий ошибок и успехов.

success(message: string) { this.subject.next({type: ‘success’, text: message}); }

error(message: string) { this.subject.next({ type: ‘error’, text: message }); }

Теперь можно пробовать отправлять уведомления из произвольных компонентов.

Сделаем для авторизации.

import { AlertService } from '../directives/alert.service';


constructor(
          ...
          private alert: AlertService
          ) { }    
...
  login() {
      this.http_service.login(this.username, this.password).subscribe((data: any) => {
         console.log(data);
         if(data['status'] == 1) {
          this.alert.error(data['message']);  
  ...

Уведомление при разлогине.

  logout() {
    this.db.setIsLogin('false');
    this.alert.success('Goodbye!')
  }

registration angular

Other topics