AngularJS'ye eşdeğer $scope.emit()veya $scope.broadcast()AngularJS den eşdeğer yoktur . Bir bileşenin içindeki EventEmitter yaklaşır, ancak belirttiğiniz gibi, yalnızca hemen üst bileşene bir olay gönderir.
Angular'da aşağıda açıklamaya çalışacağım başka alternatifler de var.
@Input () bağlamaları, uygulama modelinin yönlendirilmiş bir nesne grafiğine (kökten yapraklara) bağlanmasına izin verir. Bir bileşenin değişiklik algılayıcı stratejisinin varsayılan davranışı, bağlı herhangi bir bileşendeki tüm bağlamalar için tüm değişiklikleri bir uygulama modeline yaymaktır.
Yanda: İki tür model vardır: Modelleri ve Uygulama Modellerini Görüntüleyin. Bir uygulama modeli @Input () bağlamaları ile bağlanır. Görünüm modeli, bileşenin şablonunda bağlı olan yalnızca bir bileşen özelliğidir (@Input () ile dekore edilmez).
Sorularınızı cevaplamak için:
Kardeş bileşenler arasında iletişim kurmam gerekirse ne olur?
Paylaşılan Uygulama Modeli : Kardeşler paylaşılan bir uygulama modeli aracılığıyla iletişim kurabilirler (tıpkı açısal 1 gibi). Örneğin, bir kardeş bir modelde değişiklik yaptığında, aynı modele bağlanan diğer kardeş otomatik olarak güncellenir.
Bileşen Olayları : Alt bileşenler @Output () bağlamaları kullanarak üst bileşene olay gönderebilir. Üst bileşen olayı işleyebilir ve uygulama modelini veya kendi görünüm modelini değiştirebilir. Uygulama Modelindeki değişiklikler, aynı modele doğrudan veya dolaylı olarak bağlanan tüm bileşenlere otomatik olarak yayılır.
Servis Olayları : Bileşenler servis olaylarına abone olabilir. Örneğin, iki kardeş bileşen aynı hizmet etkinliğine abone olabilir ve ilgili modellerini değiştirerek yanıt verebilir. Bu konuda daha fazlası aşağıda.
Bir Kök bileşeni ile birkaç seviye derinliğe yerleştirilmiş bir bileşen arasında nasıl iletişim kurabilirim?
- Paylaşılan Uygulama Modeli : Uygulama modeli, @Input () bağlamaları yoluyla Kök bileşeninden derin yuvalanmış alt bileşenlere geçirilebilir. Herhangi bir bileşenden bir modelde yapılan değişiklikler otomatik olarak aynı modeli paylaşan tüm bileşenlere yayılır.
- Hizmet Olayları : Ayrıca EventEmitter'ı, herhangi bir bileşenin hizmeti enjekte etmesine ve etkinliğe abone olmasına izin veren paylaşılan bir hizmete taşıyabilirsiniz. Bu şekilde, bir Kök bileşen bir hizmet yöntemini çağırabilir (tipik olarak modeli değiştirir) ve bu da bir olay yayar. Birkaç kat aşağı, aynı zamanda hizmeti enjekte eden ve aynı etkinliğe abone olan bir büyük çocuk bileşeni, bunu kaldırabilir. Paylaşılan bir Uygulama Modelini değiştiren herhangi bir olay işleyicisi otomatik olarak ona bağımlı olan tüm bileşenlere yayılır. Bu muhtemelen
$scope.broadcast()Açısal 1'den en yakın eşdeğerdir . Bir sonraki bölümde bu fikir daha ayrıntılı olarak açıklanmaktadır.
Değişiklikleri Yaymak için Hizmet Olaylarını kullanan Gözlemlenebilir Hizmet Örneği
Aşağıda, değişiklikleri yaymak için hizmet olaylarını kullanan gözlenebilir bir hizmet örneği verilmiştir. Bir TodoItem eklendiğinde, hizmet bileşen abonelerini bildiren bir olay yayar.
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);
}
}
Bir kök bileşenin etkinliğe nasıl abone olacağı aşağıda açıklanmıştır:
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;
}
}
Birkaç seviye derinliğe yerleştirilmiş bir alt bileşen, etkinliğe aynı şekilde abone olur:
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;
}
}
Etkinliği tetiklemek için hizmeti çağıran bileşen (bileşen ağacında herhangi bir yerde bulunabilir):
@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));
}
}
Referans: Açısal Olarak Değişiklik Algılama