에 상응하는 없습니다 $scope.emit()또는 $scope.broadcast()AngularJS와에서가. 구성 요소 내부의 EventEmitter가 가까이와 있지만 언급했듯이 직접 상위 구성 요소로만 이벤트를 방출합니다.
Angular에는 아래에서 설명 할 다른 대안이 있습니다.
@Input () 바인딩을 사용하면 응용 프로그램 모델을 지정된 객체 그래프 (루트에서 잎으로)에 연결할 수 있습니다. 구성 요소 변경 탐지기 전략의 기본 동작은 연결된 구성 요소의 모든 바인딩에 대한 모든 변경 사항을 응용 프로그램 모델에 전파하는 것입니다.
옆으로 : 두 가지 유형의 모델이 있습니다 : 모델보기 및 응용 프로그램 모델. 애플리케이션 모델은 @Input () 바인딩을 통해 연결됩니다. 뷰 모델은 구성 요소의 템플릿에 바인딩 된 구성 요소 속성 (@Input ()으로 장식되지 않음) 일뿐입니다.
질문에 대답하려면 :
형제 구성 요소간에 통신해야하는 경우 어떻게합니까?
공유 응용 프로그램 모델 : 형제는 공유 응용 프로그램 모델 (각도 1과 동일)을 통해 통신 할 수 있습니다. 예를 들어 한 형제가 모델을 변경하면 동일한 모델에 바인딩 된 다른 형제가 자동으로 업데이트됩니다.
컴포넌트 이벤트 : 하위 컴포넌트는 @Output () 바인딩을 사용하여 상위 컴포넌트에 이벤트를 생성 할 수 있습니다. 부모 구성 요소는 이벤트를 처리하고 응용 프로그램 모델 또는 자체 뷰 모델을 조작 할 수 있습니다. 응용 프로그램 모델에 대한 변경 사항은 동일한 모델에 직접 또는 간접적으로 바인딩되는 모든 구성 요소에 자동으로 전파됩니다.
서비스 이벤트 : 구성 요소는 서비스 이벤트 를 구독 할 수 있습니다. 예를 들어 두 형제 구성 요소는 동일한 서비스 이벤트에 가입하고 해당 모델을 수정하여 응답 할 수 있습니다. 이에 대한 자세한 내용은 아래를 참조하십시오.
루트 구성 요소와 여러 수준으로 중첩 된 구성 요소간에 통신하려면 어떻게해야합니까?
- 공유 응용 프로그램 모델 : 응용 프로그램 모델은 @Input () 바인딩을 통해 루트 구성 요소에서 중첩 된 하위 구성 요소로 전달 될 수 있습니다. 구성 요소에서 모델을 변경하면 동일한 모델을 공유하는 모든 구성 요소에 자동으로 전파됩니다.
- 서비스 이벤트 : 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));
}
}
참조 : 각도 변화 감지