[angular] Angular의 글로벌 이벤트

에 상응하는 없습니다 $scope.emit()또는 $scope.broadcast()AngularJS와에서가. 구성 요소 내부의 EventEmitter가 가까이와 있지만 언급했듯이 직접 상위 구성 요소로만 이벤트를 방출합니다.

Angular에는 아래에서 설명 할 다른 대안이 있습니다.

@Input () 바인딩을 사용하면 응용 프로그램 모델을 지정된 객체 그래프 (루트에서 잎으로)에 연결할 수 있습니다. 구성 요소 변경 탐지기 전략의 기본 동작은 연결된 구성 요소의 모든 바인딩에 대한 모든 변경 사항을 응용 프로그램 모델에 전파하는 것입니다.

옆으로 : 두 가지 유형의 모델이 있습니다 : 모델보기 및 응용 프로그램 모델. 애플리케이션 모델은 @Input () 바인딩을 통해 연결됩니다. 뷰 모델은 구성 요소의 템플릿에 바인딩 된 구성 요소 속성 (@Input ()으로 장식되지 않음) 일뿐입니다.

질문에 대답하려면 :

형제 구성 요소간에 통신해야하는 경우 어떻게합니까?

1. 공유 응용 프로그램 모델 : 형제는 공유 응용 프로그램 모델 (각도 1과 동일)을 통해 통신 할 수 있습니다. 예를 들어 한 형제가 모델을 변경하면 동일한 모델에 바인딩 된 다른 형제가 자동으로 업데이트됩니다.

2. 컴포넌트 이벤트 : 하위 컴포넌트는 @Output () 바인딩을 사용하여 상위 컴포넌트에 이벤트를 생성 할 수 있습니다. 부모 구성 요소는 이벤트를 처리하고 응용 프로그램 모델 또는 자체 뷰 모델을 조작 할 수 있습니다. 응용 프로그램 모델에 대한 변경 사항은 동일한 모델에 직접 또는 간접적으로 바인딩되는 모든 구성 요소에 자동으로 전파됩니다.

3. 서비스 이벤트 : 구성 요소는 서비스 이벤트 를 구독 할 수 있습니다. 예를 들어 두 형제 구성 요소는 동일한 서비스 이벤트에 가입하고 해당 모델을 수정하여 응답 할 수 있습니다. 이에 대한 자세한 내용은 아래를 참조하십시오.

루트 구성 요소와 여러 수준으로 중첩 된 구성 요소간에 통신하려면 어떻게해야합니까?

1. 공유 응용 프로그램 모델 : 응용 프로그램 모델은 @Input () 바인딩을 통해 루트 구성 요소에서 중첩 된 하위 구성 요소로 전달 될 수 있습니다. 구성 요소에서 모델을 변경하면 동일한 모델을 공유하는 모든 구성 요소에 자동으로 전파됩니다.
2. 서비스 이벤트 : EventEmitter를 공유 서비스로 옮길 수 있습니다.이를 통해 모든 구성 요소가 서비스를 주입하고 이벤트를 구독 할 수 있습니다. 이렇게하면 루트 구성 요소가 서비스 메소드 (일반적으로 모델 변경)를 호출하여 이벤트를 생성 할 수 있습니다. 서비스를 주입하고 동일한 이벤트를 구독 한 손자 구성 요소 인 여러 계층이이를 처리 할 수 ​​있습니다. 공유 응용 프로그램 모델을 변경하는 이벤트 핸들러는 해당 응용 프로그램 모델에 종속 된 모든 구성 요소에 자동으로 전파됩니다. 이것은 아마도 $scope.broadcast()Angular 1 과 가장 가까운 것입니다 . 다음 섹션에서는이 아이디어에 대해 자세히 설명합니다.

서비스 이벤트를 사용하여 변경 사항을 전파하는 관찰 가능한 서비스의 예

다음은 서비스 이벤트를 사용하여 변경 사항을 전파하는 관찰 가능한 서비스의 예입니다. TodoItem이 추가되면 서비스는 구성 요소 가입자에게 알리는 이벤트를 생성합니다.

export class TodoItem {
    constructor(public name: string, public done: boolean) {
    }
}
export class TodoService {
    public itemAdded$: EventEmitter<TodoItem>;
    private todoList: TodoItem[] = [];

    constructor() {
        this.itemAdded$ = new EventEmitter();
    }

    public list(): TodoItem[] {
        return this.todoList;
    }

    public add(item: TodoItem): void {
        this.todoList.push(item);
        this.itemAdded$.emit(item);
    }
}

루트 구성 요소가 이벤트를 구독하는 방법은 다음과 같습니다.

export class RootComponent {
    private addedItem: TodoItem;
    constructor(todoService: TodoService) {
        todoService.itemAdded$.subscribe(item => this.onItemAdded(item));
    }

    private onItemAdded(item: TodoItem): void {
        // do something with added item
        this.addedItem = item;
    }
}

여러 수준으로 중첩 된 자식 구성 요소는 동일한 방식으로 이벤트를 구독합니다.

export class GrandChildComponent {
    private addedItem: TodoItem;
    constructor(todoService: TodoService) {
        todoService.itemAdded$.subscribe(item => this.onItemAdded(item));
    }

    private onItemAdded(item: TodoItem): void {
        // do something with added item
        this.addedItem = item;
    }
}

다음은 서비스를 호출하여 이벤트를 트리거하는 구성 요소입니다 (구성 요소 트리의 어느 곳에 나있을 수 있음).

@Component({
    selector: 'todo-list',
    template: `
         <ul>
            <li *ngFor="#item of model"> {{ item.name }}
            </li>
         </ul>
        <br />
        Add Item <input type="text" #txt /> <button (click)="add(txt.value); txt.value='';">Add</button>
    `
})
export class TriggeringComponent{
    private model: TodoItem[];

    constructor(private todoService: TodoService) {
        this.model = todoService.list();
    }

    add(value: string) {
        this.todoService.add(new TodoItem(value, false));
    }
}

참조 : 각도 변화 감지

답변

import {Injectable} from 'angular2/core';
import * as Rx from 'rxjs/Rx';

@Injectable()
export class EventsService {
    constructor() {
        this.listeners = {};
        this.eventsSubject = new Rx.Subject();

        this.events = Rx.Observable.from(this.eventsSubject);

        this.events.subscribe(
            ({name, args}) => {
                if (this.listeners[name]) {
                    for (let listener of this.listeners[name]) {
                        listener(...args);
                    }
                }
            });
    }

    on(name, listener) {
        if (!this.listeners[name]) {
            this.listeners[name] = [];
        }

        this.listeners[name].push(listener);
    }

    off(name, listener) {
        this.listeners[name] = this.listeners[name].filter(x => x != listener);
    }

    broadcast(name, ...args) {
        this.eventsSubject.next({
            name,
            args
        });
    }
}

function handleHttpError(error) {
    this.eventsService.broadcast('http-error', error);
    return ( Rx.Observable.throw(error) );
}

import {Inject, Injectable} from "angular2/core";
import {EventsService}      from './events.service';

@Injectable()
export class HttpErrorHandler {
    constructor(eventsService) {
        this.eventsService = eventsService;
    }

    static get parameters() {
        return [new Inject(EventsService)];
    }

    init() {
        this.eventsService.on('http-error', function(error) {
            console.group("HttpErrorHandler");
            console.log(error.status, "status code detected.");
            console.dir(error);
            console.groupEnd();
        });
    }
}

this.eventsService.broadcast('something', "Am I a?", "Should be b", "C?");

this.eventsService.on('something', function (a, b, c) {
   console.log(a, b, c);
});

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter'
import 'rxjs/add/operator/map'

interface Message {
  type: string;
  payload: any;
}

type MessageCallback = (payload: any) => void;

@Injectable()
export class MessageService {
  private handler = new Subject<Message>();

  broadcast(type: string, payload: any) {
    this.handler.next({ type, payload });
  }

  subscribe(type: string, callback: MessageCallback): Subscription {
    return this.handler
      .filter(message => message.type === type)
      .map(message => message.payload)
      .subscribe(callback);
  }
}

import { Component, OnDestroy } from '@angular/core'
import { MessageService } from './message.service'
import { Subscription } from 'rxjs/Subscription'

@Component({
  selector: 'sender',
  template: ...
})
export class SenderComponent implements OnDestroy {
  private subscription: Subscription;
  private messages = [];
  private messageNum = 0;
  private name = 'sender'

  constructor(private messageService: MessageService) {
    this.subscription = messageService.subscribe(this.name, (payload) => {
      this.messages.push(payload);
    });
  }

  send() {
    let payload = {
      text: `Message ${++this.messageNum}`,
      respondEvent: this.name
    }
    this.messageService.broadcast('receiver', payload);
  }

  clear() {
    this.messages = [];
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

import { Component, OnDestroy } from '@angular/core'
import { MessageService } from './message.service'
import { Subscription } from 'rxjs/Subscription'

@Component({
  selector: 'receiver',
  template: ...
})
export class ReceiverComponent implements OnDestroy {
  private subscription: Subscription;
  private messages = [];

  constructor(private messageService: MessageService) {
    this.subscription = messageService.subscribe('receiver', (payload) => {
      this.messages.push(payload);
    });
  }

  send(message: {text: string, respondEvent: string}) {
    this.messageService.broadcast(message.respondEvent, message.text);
  }

  clear() {
    this.messages = [];
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

import { Subscription } from 'rxjs/Subscription';
...
export class SomeListener {
  subscription: Subscription;

  constructor(private messageService: MessageService) {
    this.subscription = messageService.subscribe('someMessage', (payload) => {
      console.log(payload);
      this.subscription.unsubscribe();
    });
  }
}

export Class myService {
#all the stuff that must exist

myString: string[] = [];
contactChange : BehaviorSubject<string[]> = new BehaviorSubject(this.myString);

   getContacts(newContacts) {
     // get your data from a webservices & when you done simply next the value
    this.contactChange.next(newContacts);
   }
}

export Class myComp {
#all the stuff that exists like @Component + constructor using (private myService: myService)

this.myService.contactChange.subscribe((contacts) => {
     this.contactList += contacts; //run everytime next is called
  }
}

this.pubSubService.Stream.emit(customer);

this.pubSubService.Stream.subscribe(customer => this.processCustomer(customer));