angular - Angular4: Yönlendirici aracılığıyla eklenen çocuklar için ebeveynden çocuğa nasıl veri aktarılır

Bu sorudan devam ederek Angular 4^: Her çocuğun kendi yönlendirici çıkışını hedeflediği bir bileşenin birden fazla çocuğu nasıl olur, bazı çocuk bileşenlerini birden fazla üst bileşene enjekte edebiliyorum, şimdi bu üstlerden çocuklara veriyi eşzamansız olarak geçirmek istiyorum. @Input denedim, başaramadım gibi görünüyor.

Çocuk

export class UserheaderComponent implements OnInit, AfterViewInit, OnChanges {
  loading;
  @Input() data;
  user = {
    name: '______________',
    icon: '',
    username: '_________',
    uid: '________'
  };
  constructor(private router: Router) {
  }

  goToUser(uid) {
    this.router.navigate(['user'], { queryParams: { uid: uid } });
  }

  ngOnInit() {
    this.user = this.data;
    console.log(this.data);
  }

  ngAfterViewInit() {
    console.log(this.data);
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
}

Ebeveyn Html

  <router-outlet name='userprofile-userhead' [data]="currentUser"></router-outlet>

Ebeveyn TS

export class UserprofileComponent {
  public currentUser;

  constructor(
    private userFactory: UserFactory,
    private router: Router,
    private snack: MatSnackBar) {
    this.userFactory.checkSession(exists => {
      if (!exists) {
        return;
      }
      this.userFactory.getSessionUser((uid, user) => {
        this.currentUser = user;
      });
    });
  }
}

VE YÖNLENDİRME

path: '', component: UserprofileComponent, outlet: 'userprofile', children: [
          { path: '', component: UserheaderComponent, outlet: 'userprofile-userhead' },
        ]

Hiçbir şey çocuğa aktarılmıyor, bu tür bir düzenlemeyle mümkün mü yoksa bir şeyi mi kaçırıyorum?

Paylaşılan bir hizmet kullanılamıyor.

Her bileşen bunu kendi Kimliği ile kullanmalıdır. Bunu, sosyal medya zaman akışı gibi bir gönderi zaman çizelgesinde düşünün, ve burası gönderinin başı, yani kullanıcı simgesi, adı... kullanıcı adı olan yer. Yani bir 'gönderi' bileşeni bunu bir alt bileşen olarak ekleyecek, ona bir kullanıcı nesnesi:{name:'...',username:'...'} geçecek, bu yüzden burada bir servisin nasıl iş göreceğini anlamıyorum.

Şimdi biz bu konuda iken, uygulamanın bir yerinde, bir profil bileşeni, bir arama bileşeni bunu çağırabilir...

Hala bir hizmetin işe yarayacağını düşünüyorsanız, lütfen detaylandırın.

Cevap #1

Seni anlıyorum, ama bence bu sorunun cevabı hâlâ paylaşılan hizmettir.

Hangi veriye abone olacağını ve yayınlayacağını atayabileceğiniz bir pub/sub servisini uygulamayı deneyebilirsiniz.

bunu dene:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

/**
 * Publisher/Subscriber Service
 */
@Injectable()
export class PubSubService {

    private events: any = {};

    constructor() { }

    /**
     * Subscribes the instance of the assigned event name
     * @param eventName
     * Event name of the delegate
     */
    public On(eventName: PubSubEvents): Observable<any> {

        if (typeof this.events[eventName] === 'undefined') {
            this.events[eventName] = new Subject<any>();
        }

        return this.events[eventName].asObservable();
    }

    /**
     * Broadcast data to the specified event channel
     * @param eventName
     * Event name of the delegate
     * @param eventArgs
     * Arguments to pass through to the connected channel
     */
    public Broadcast(eventName: PubSubEvents, eventArgs: any) {
        if (!this.events[eventName]) {
            return;
        }

        this.events[eventName].next(eventArgs);
    }

}

//Your events
export declare type PubSubEvents =
    "OnChild1" | "OnChild2";

Üst bileşende ihtiyacınıza göre tüm olaylara abone olabilirsiniz.

Veli

constructor(private pubsub: PubSubService){
  this.pubsub.On("OnChild1").subscribe((res) =>{ //Child 1 data}));
  this.pubsub.On("OnChild2").subscribe((res) =>{ //Child 2 data}));
}

çocuk bileşenindeyken bunu yapmanız gerekiyor

Çocuk 1

constructor(private pubsub: PubSubService){
  this.pubsub.Broadcast("OnChild1", "your_data")
}

Çocuk 2

constructor(private pubsub: PubSubService){
  this.pubsub.Broadcast("OnChild2", "your_data")
}

Cevap #2

Bence bu durumda geçerli bir seçenek, UserheaderComponent'in yönlendirmesine bazı parametreler eklemek ve ardından bileşen başlatılırken bunları almak ve servisten beklenen verileri almaktır.

Öncelikle, bunu bileşeninizin rota yoluna eklemeniz gerekir

path: 'userHead/:userId'

O zaman buna yönlendirirken bu parametreyi ayarlamanız gerekiyor ve sonra bileşen başlatılırken bunu alabilirsiniz

this.activatedRoute.params.subscribe((params) => { const userHead= 
params['userId']; }

Son olarak, o parametreye dayanarak hizmetten beklenen veriyi alabilirsiniz.

Tek bir çocuğunuz olacaksa, bileşeni doğrudan böyle kullanmayı düşünün

<userprofile-userhead name='userprofile-userhead' [data]="currentUser"> 
</userprofile-userhead>

router-outlet yerine.

İlgili makaleler