Событийная модель Ангуляр Событийная модель Ангуляр angular event

Событийная модель Ангуляр

Open in new window

Событийная модель.

Создадим сервис событий.

Где зарегистрируем три события.

import { Injectable } from '@angular/core';
import {Subject} from "rxjs/Rx";

@Injectable({
  providedIn: 'root'
})
export class EventService {

  private _update_list_emmiter = new Subject();
  updateSubscriber$ = this._update_list_emmiter.asObservable();

  private _form_emmiter = new Subject();
  formSubscriber$ = this._form_emmiter.asObservable();

  private _list_emmiter = new Subject();
  listSubscriber$ = this._list_emmiter.asObservable();

  constructor() { }


  showListEvent(flag: boolean){
    this._list_emmiter.next(flag);
  }

  showFormEvent(item: any){
    this._form_emmiter.next(item);
  }

  updateListEvent(){
    this._update_list_emmiter.next(true);
  }


}

Определим триггеры в компоненте.

export class PersonComponent implements OnInit {

  ...
  // Interface
  isListHidden: boolean = false;
  isFormHidden: boolean = true;

Отобразим компоненты согласно тригерам.

<h2>Физ. лица</h2>
<person-form [person]="item" [hidden]="isFormHidden"></person-form>
<person-list  (onSelected)="select($event)" [hidden]="isListHidden"></person-list>

Сервис пользовательского интерфейса

ng g service ui

Опишем сервис.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UiService {

  _db : any;

  constructor() {
    this._db = {
      menu: {
        document: { is_active: false },
        person: { is_active: false },
        company: { is_active: false }
      }
    };
   }

   get menu(){
     return this._db.menu;
   };

   activate(menu: string){
    this.deactivateAll();
    this._db.menu[menu]['is_active'] = true;
   };

   deactivateAll(){
      for (let key in this._db.menu) {
        this._db.menu[key].is_active = false;
      }
   }

}

Где определяем приватную переменную _db где будем хранить состояния с текущим разделом и функции:

  • menu - получение объекта menu.

  • activate - активация меню.

  • deactivateAll - сброс всех пунктов в false.

Компонент навигации.

import { UiService } from '../ui.service'

...
export class NavComponent implements OnInit {
 ...
  menu: any;
  constructor(
             ...
              private ui: UiService
              ) { }

Активация пунктов меню в компонентах разделов.

import { UiService } from '../ui.service'

...
export class CompanyComponent implements OnInit {

 ...

  constructor(private company_service: CompanyService, private ui_service: UiService) { }

  ngOnInit() {
    this.ui_service.activate('company');
 ...

Вывставим css класс в шаблоне навигации.

  <li class="page-item mx-1" >
    <button [className]="menu.document.is_active ? 'btn btn-outline-success':'btn btn-success btn-sm'" class="btn" routerLink="/documents">Документы</button>
  </li>
  <li class="page-item mx-1" >
    <button [className]="menu.person.is_active ? 'btn btn-outline-success':'btn btn-success btn-sm'" class="btn btn-success btn-sm" routerLink="/persons">Физ. лица</button>
  </li>
  <li class="page-item mx-1" >
    <button  [className]="menu.company.is_active ? 'btn btn-outline-success':'btn btn-success btn-sm'" class="btn btn-success btn-sm" routerLink="/company">Компании</button>
  </li>

Other topics