Angular2 bağımlı bileşenler

Question

Üç bileşenim var.

• CategoryComponent - kategori listesi
• ListComponent - seçilen kategori elemanlarının listesi
• ScreenComponent - MenuComponent ve ContentComponent bileşimi

ScreenComponent şablonu aşağıdaki gibidir:

<category-list></category-list> 
<elements-list [categoryId]="6"></elements-list> 

Listede seçilen kategorinin kimliğini almak için ListComponent'i istiyorum Sabit kodlanmış 6 yerine CategoryComponent. Bunu nasıl yapabilirim? Bu doğru yaklaşım mı yoksa CategoryComponent işi ScreenComponent tarafından mı yapılmalı?

Answer 1

Bu iki bileşen arasında ilişki (ebeveyn/çocuk) olmadığından, paylaşılan bir hizmetten faydalanmanız gerekir. Öğeler listesi, bir kategori seçildiğinde bildirilecek hizmete gözlenebilir bir değere kaydolur ve kendini buna göre günceller.

Bu hizmet, veriler güncellendiğinde bildirim almak için abone olunacak verileri ve gözlenebilirleri içerebilir.

• Servis

  export class SharedService { 
      observable: Observable<any>; 
      observer: Observer<any>; 
  
      constructor() { 
      this.observable = new Observable.create(observer => { 
       this.observer = observer; 
      }).share(); 
  
      updateData() { 
      this.observer.next('something'); 
      } 
  } 
  

• Bileşen

  @Component({ 
      selector: 'my-component1', 
      template: ` 
      (...) 
      ` 
  }) 
  export class MyComponent1 { 
      constructor(private service:ListService) { 
      this.service.observable.subscribe.(data => { 
       (...) 
      }); 
      } 
  } 
  

• önyükleme

  bootstrap(AppComponent, [ SharedService ]); 
  

fazla ayrıntı için bu soruya bakın:

• Delegation: EventEmitter or Observable in Angular2
• Delegation: EventEmitter or Observable in Angular2