Angular의 글로벌 이벤트
에 해당하는 것이 있습니까?$scope.emit()또는$scope.broadcast()?
나는 알고 있습니다EventEmitter기능성, 하지만 내가 이해하기로는 그것은 단지 상위 HTML 요소에 이벤트를 방출할 것입니다.
fx. 형제자매 간 또는 DOM 루트의 구성 요소와 여러 레벨로 중첩된 요소 간에 통신해야 하는 경우에는 어떻게 해야 합니까?
와 동등한 것은 없습니다.$scope.emit()또는$scope.broadcast()AngularJS입니다.구성 요소 내부의 이미터도 근접하지만, 언급한 것처럼 이벤트는 직접 상위 구성 요소에만 발생합니다.
Angular에는 아래에서 설명하려는 다른 대안이 있습니다.
@Input() 바인딩을 사용하면 응용 프로그램 모델을 방향 지정된 개체 그래프(리프에 대한 루트)로 연결할 수 있습니다.구성 요소의 변경 탐지 전략의 기본 동작은 연결된 구성 요소의 모든 바인딩에 대해 모든 변경 사항을 응용 프로그램 모델로 전파하는 것입니다.
참고: 두 가지 유형의 모델이 있습니다.모델 및 응용 프로그램 모델을 봅니다.애플리케이션 모델은 @Input() 바인딩을 통해 연결됩니다.뷰 모델은 구성요소의 템플릿에 바인딩된 구성요소 특성(@Input()으로 장식되지 않음)일 뿐입니다.
질문에 대한 답변:
형제 구성 요소 간에 통신이 필요한 경우 어떻게 해야 합니까?
공유 응용 프로그램 모델: 형제자매는 공유 응용 프로그램 모델을 통해 통신할 수 있습니다(각 1과 동일).예를 들어 한 형제자매가 모델을 변경하면 동일한 모델에 바인딩된 다른 형제자매가 자동으로 업데이트됩니다.
구성 요소 이벤트:하위 구성 요소는 @Output() 바인딩을 사용하여 이벤트를 상위 구성 요소로 내보낼 수 있습니다.상위 구성 요소는 이벤트를 처리하고 응용 프로그램 모델 또는 자체 뷰 모델을 조작할 수 있습니다.응용프로그램 모델의 변경사항은 동일한 모델에 직접 또는 간접적으로 바인딩된 모든 구성요소에 자동으로 전파됩니다.
서비스 이벤트: 구성 요소가 서비스 이벤트에 가입할 수 있습니다.예를 들어 두 형제 구성 요소가 동일한 서비스 이벤트에 가입하고 각각의 모델을 수정하여 응답할 수 있습니다.자세한 내용은 아래에 있습니다.
루트 구성 요소와 여러 수준으로 중첩된 구성 요소 간에 통신하려면 어떻게 해야 합니까?
- 공유 애플리케이션 모델:응용 프로그램 모델은 루트 구성 요소에서 @Input() 바인딩을 통해 깊이 중첩된 하위 구성 요소로 전달될 수 있습니다.구성 요소에서 모델을 변경하면 동일한 모델을 공유하는 모든 구성 요소에 자동으로 적용됩니다.
- 서비스 이벤트:또한 이벤트 이미터를 공유 서비스로 이동하여 모든 구성 요소가 서비스를 주입하고 이벤트에 가입할 수 있습니다.이러한 방식으로 루트 구성 요소는 서비스 메서드를 호출할 수 있으며(일반적으로 모델을 변형함), 이 메서드는 이벤트를 발생시킵니다.서비스를 주입하고 동일한 이벤트에 가입한 손자녀 구성 요소인 여러 계층이 이를 처리할 수 있습니다.공유 응용 프로그램 모델을 변경하는 모든 이벤트 처리기는 해당 모델에 종속된 모든 구성 요소에 자동으로 전파됩니다.이것은 아마도 가장 가까운 것일 것입니다.
$scope.broadcast()각 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));
}
}
참조:각도의 변경 감지
이벤트를 처리하기 위해 공유 서비스를 사용하는 Angular 2의 $scope.emit() 또는 $scope.broadcast()에 대한 교체 예로서 다음 코드가 있습니다.
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);
});
나는 rxjs를 랩하는 메시지 서비스를 사용하고 있습니다.Subject(TypeScript)
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();
}
}
그subscribe의 MessageService rxjs 반환니다를 합니다.Subscription다음과 같이 구독을 취소할 수 있는 개체:
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();
});
}
}
다음 답변도 참조하십시오. https://stackoverflow.com/a/36782616/1861779
서비스 통신에 이벤트 이미터를 사용하지 마십시오.
관찰 가능한 유형 중 하나를 사용해야 합니다.저는 개인적으로 행동 과목을 좋아합니다.
간단한 예:
초기 상태를 통과할 수 있습니다. 여기서 저는 null을 통과합니다.
let subject = new BehaviorSubject(null);
제목을 업데이트할 때
subject.next(myObject)
모든 서비스 또는 구성 요소를 관찰하고 새 업데이트를 받으면 작업을 수행합니다.
주제.기부금을 내다방법);
사용할 수 있습니다.
이벤트 이미터 또는 DI에 등록한 이벤트 버스 서비스를 생성하기 위해 관찰할 수 있습니다. 참여를 원하는 모든 구성 요소는 생성자 매개 변수로 서비스를 요청하고 이벤트를 방출 및/또는 구독합니다.
참고 항목
- https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service
- 위임:Angular2에서 이벤트 이미터 또는 관찰 가능
제가 가장 좋아하는 방법은 서비스에서 동작 주체 또는 이벤트 이미터(거의 동일)를 사용하여 모든 하위 구성 요소를 제어하는 것입니다.
각도 클리닝, 링을 사용하여 새 서비스를 생성한 다음 BehaviorSubject 또는 EventEmitter를 사용합니다.
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);
}
}
이 작업을 수행하면 서비스를 제공자로 사용하는 모든 구성 요소가 변경 사항을 인식하게 됩니다.eventEmitter처럼 결과를 구독하기만 하면 됩니다 ;)
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
}
}
여기에 pub-sub 샘플을 만들었습니다.
http://www.syntaxsuccess.com/viewarticle/pub-sub-in-angular-2.0
이 아이디어는 RxJs Subjects를 사용하여 사용자 지정 이벤트를 내보내고 구독하기 위한 일반 솔루션으로 관찰자 및 관찰자를 연결하는 것입니다.샘플에서 데모 목적으로 고객 개체를 사용합니다.
this.pubSubService.Stream.emit(customer);
this.pubSubService.Stream.subscribe(customer => this.processCustomer(customer));
여기 라이브 데모도 있습니다. http://www.syntaxsuccess.com/angular-2-samples/ #/https/https-sub
이것은 내 버전입니다.
export interface IEventListenr extends OnDestroy{
ngOnDestroy(): void
}
@Injectable()
export class EventManagerService {
private listeners = {};
private subject = new EventEmitter();
private eventObserver = this.subject.asObservable();
constructor() {
this.eventObserver.subscribe(({name,args})=>{
if(this.listeners[name])
{
for(let listener of this.listeners[name])
{
listener.callback(args);
}
}
})
}
public registerEvent(eventName:string,eventListener:IEventListenr,callback:any)
{
if(!this.listeners[eventName])
this.listeners[eventName] = [];
let eventExist = false;
for(let listener of this.listeners[eventName])
{
if(listener.eventListener.constructor.name==eventListener.constructor.name)
{
eventExist = true;
break;
}
}
if(!eventExist)
{
this.listeners[eventName].push({eventListener,callback});
}
}
public unregisterEvent(eventName:string,eventListener:IEventListenr)
{
if(this.listeners[eventName])
{
for(let i = 0; i<this.listeners[eventName].length;i++)
{
if(this.listeners[eventName][i].eventListener.constructor.name==eventListener.constructor.name)
{
this.listeners[eventName].splice(i, 1);
break;
}
}
}
}
emit(name:string,...args:any[])
{
this.subject.next({name,args});
}
}
사용:
export class <YOURCOMPONENT> implements IEventListener{
constructor(private eventManager: EventManagerService) {
this.eventManager.registerEvent('EVENT_NAME',this,(args:any)=>{
....
})
}
ngOnDestroy(): void {
this.eventManager.unregisterEvent('closeModal',this)
}
}
방출:
this.eventManager.emit("EVENT_NAME");
모든 모델 변경 사항을 자체 구성 요소에서 인스턴스화하는 이벤트 이미터를 통해 전송하는 ngModelChange 관찰 가능한 지침을 구현했습니다.이벤트 이미터를 지침에 바인딩하기만 하면 됩니다.
참조: https://github.com/atomicbits/angular2-modelchangeobservable
html에서 이벤트 이미터를 바인딩합니다(이 예에서 변경된 국가).
<input [(ngModel)]="country.name"
[modelChangeObservable]="countryChanged"
placeholder="Country"
name="country" id="country"></input>
유형 스크립트 구성 요소에서 EventEmitter에서 다음과 같은 비동기 작업을 수행합니다.
import ...
import {ModelChangeObservable} from './model-change-observable.directive'
@Component({
selector: 'my-component',
directives: [ModelChangeObservable],
providers: [],
templateUrl: 'my-component.html'
})
export class MyComponent {
@Input()
country: Country
selectedCountries:Country[]
countries:Country[] = <Country[]>[]
countryChanged:EventEmitter<string> = new EventEmitter<string>()
constructor() {
this.countryChanged
.filter((text:string) => text.length > 2)
.debounceTime(300)
.subscribe((countryName:string) => {
let query = new RegExp(countryName, 'ig')
this.selectedCountries = this.countries.filter((country:Country) => {
return query.test(country.name)
})
})
}
}
서비스 이벤트: 구성 요소가 서비스 이벤트에 가입할 수 있습니다.예를 들어 두 형제 구성 요소가 동일한 서비스 이벤트에 가입하고 각각의 모델을 수정하여 응답할 수 있습니다.자세한 내용은 아래에 있습니다.
그러나 상위 구성 요소를 파괴할 때는 구독을 취소해야 합니다.
언급URL : https://stackoverflow.com/questions/34700438/global-events-in-angular
'programing' 카테고리의 다른 글
| Windows의 Git 저장소에 있는 디렉터리 무시 (0) | 2023.05.01 |
|---|---|
| Pymongo / MongoDB: 인덱스를 생성하거나 인덱스를 보장합니까? (0) | 2023.05.01 |
| IFrame에서 테두리 제거 (0) | 2023.05.01 |
| SQL 쿼리의 '좋지 않음' (0) | 2023.05.01 |
| 기존 원본에서 새 프로젝트를 만들 때 Eclipse "잘못된 프로젝트 설명" (0) | 2023.05.01 |