bxnotes.ru
  • конспекты
  • статьи
Angular в конспектах Angular Bitrix в конспектах Bitrix Git в конспектах Git Js в конспектах Js Linux в конспектах Linux MySQL в конспектах MySQL Php в конспектах Php React в конспектах React
Angular в статьях Angular Bitrix в статьях Bitrix Git в статьях Git Js в статьях Js Linux в статьях Linux MySQL в статьях MySQL Php в статьях Php React в статьях React
Главная
Статьи
frameworks
angular
Subject
Статья из конспекта "Angular 5 - The Complete Guide":
  • Установка и первый запуск
  • Тестирование возможностей
  • TypeScript, Bootstrap, Main.ts
  • Создание компонентов
  • Шаблон и стили компонента
  • Компонент и данные
  • События
  • Динамические шаблоны в Angular5
  • Angular CSS и Style
  • Директива ngFor
  • Компонент и модель
  • Добавление данных в Компонент
  • Создание общей модели
  • Отладка
  • Связывание свойств и событий
  • Инкапсуляция стилей и ссылки
  • ng-content
  • События и жизненный цикл
  • Навигация
  • Передача данных событиями
  • Директива атрибута
  • HostListener и HostBinding
  • Binding свойств директив
  • Структурные директивы
  • Сервисы
  • JS операторы
  • Route
  • Route (переключение и параметры)
  • Обновление шаблона
  • Route продолжение
  • Вынос настроек роутера
  • Защита роутера
  • Контроль навигации с помощью сервиса
  • Route и статика
  • Route Resolving
  • Observable
  • Unsubscribe
  • Subject
  • Формы
  • Формы. Шаблонный подход.
  • Формы. Реактивный подход.

Subject

Subject в Angular5

angular5 Subject
Использование класса Subject для создания сервиса, реализующего observable и observer в Angular5.
Источник — Angular 5 - The Complete Guide:
В конспекте →

Класс Subject импортируется из rxjs/Subject. Данный класс объединяет observable и observer в одном объекте. Он реализует следующие методы:

Для отправки данных используется метод next().

Для принятия данных метод subscribe().

Для отписки unsubscribe().

Хорошей практикой является реализовать сервис на основе Subject и использовать его как альтернативу Emit.

Рассмотрим пример создания простого сервиса на основе класса Subject и то как его можно использования в различных компонентах. Один из компонентов будет реализовывать метод next(), для формирования потока. Второй компонент будет наблюдать и реагировать на изменения данного потока.

Для начала создадим сервис UsersService в файле \app\users.service.ts:

import { Subject } from 'rxjs/Subject';
export class UsersService {
userActivated = new Subject();
}
hosted with ❤ by bxnotes

Затем, нам нужно зарегистровать этот сервис в провайдерах app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { UserComponent } from './user/user.component';
import { AppRoutingModule } from './app-routing.module';
import { UsersService } from './users.service';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
UserComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [UsersService], // имя сервиса нужно передать в массив ключа providers
bootstrap: [AppComponent]
})
export class AppModule { }
hosted with ❤ by bxnotes

В шаблоне observable компонента поставим обработчик на событие click для запуска метода onActivate():

<p>User with <strong>ID {{ id }}</strong> was loaded</p>
<button class="btn btn-primary" (click)="onActivate()">Activate!</button>
hosted with ❤ by bxnotes

Метод onActivate() использует метод next() для формирования потока:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { UsersService } from '../users.service';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
id: number;
constructor(private route: ActivatedRoute, private usersService: UsersService) { }
//...
onActivate() {
this.usersService.userActivated.next(this.id);
}
}
hosted with ❤ by bxnotes

И наконец, так выглядит подписка в компоненте реализующем наблюдателя:

import { Component, OnInit } from '@angular/core';
import { UsersService } from './users.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
user1Activated = false;
user2Activated = false;
constructor(private usersService: UsersService) {}
ngOnInit() {
this.usersService.userActivated.subscribe(
(id: number) => {
if (id === 1) {
this.user1Activated = true;
} else if (id === 2) {
this.user2Activated = true;
}
}
);
}
}
hosted with ❤ by bxnotes

Таким образом, на основании переданного id меняется состояние компонента, в котором реализуется наблюдение за observable.

Источник — Angular 5 - The Complete Guide:
В конспекте →
Опубликовано 21.09.2018

© 2017–2018 bxnotes
конспекты веб разработчика
feedback@bxnotes.ru