меню

Класс 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();
}
 

Затем, нам нужно зарегистровать этот сервис в провайдерах 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 { }
  

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

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

Метод 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);
    }
}
  

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

 
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;
            }
        }
        );
    }
}
  

Возможно, вам будет интересно

HostListener и HostBinding

Использование декораторов HostListener и HostBinding для реагирования на события и работы со стилями в Angular

Динамические шаблоны в Angular

В данном руководстве рассмотрим двухстороннее связывание данных. Создание динамических шаблонов, меняющих свое состояние в зависимости от действий пользователя, с помощью двухстороннего связывания данных и директивы ngIf.

Директива атрибута

Создание директивы атрибута и использование класса Renderer2 в Angular

Навигация. Передача данных событиями

Навигация в Angular на основе событий. Передача данных между вложенными компонентами с помощью событий в Angular

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту