Eğik 2: veli-bileşeninde http veri almak ve onu

Question

iç içe üzerinde böyle bir mimari yapmayı planlıyorsunuz abone:

• bileşeni store
• - İç içe bileşenli book

yılında store - Hizmetten veri alabilen bir servis çağrısı var ve sonuçta bir abonelik yapıyorum. Angular2 docs (http) olarak tarif edildiği gibi.

Ve iç içe bileşenleri bu verileri kullanmak istiyorsanız: Malzeme-tasarım öğeleri vb formlar (formBuilder) içinde

Hangi yolu, en iyi, bunu yapmak için? Ben açısal2 için yeniyim.

Mağaza:

book: IBook; 

constructor(private bookService: BookService) { } 

ngOnInit() { 
    this.bookService.getBook('1') 
     .subscribe((book) => { 
      this.book = book; 
     }); 
} 

BookService:

... 

getBook (id): Observable<IBook> { 
    return this.http.get(this.url + '/' + id) 
     .map(this.extractData) 
     .catch(this.handleError); 
} 

private extractData(res: Response) { 
    let body = res.json(); 
    return body || { }; 
} 

... 

Kitap:

@Input() book:IBook; 

constructor() {} 

ngOnInit() { 
    /*How here can i subscribe on book http data get?, so that i can use async value in forms etc?*/ 
}); 

Çünkü ben kullanırsanız zaman uyumsuz book her yerde (formBuilder değil) - her şey yolunda, ancak ana bileşende veri yüklendikten sonra formBuilder değerlerin güncellenmesine ihtiyaç duyuyor. Bunu nasıl yapabilirim?

Answer 1

Ne bookIDBookComponent geçerek ve BookComponent zaman uyumsuz http ngInit almak işlemek izin hakkında?

export class Book implements OnInit { 
    @Input() bookID: number; 
    private book: IBook; 

    constructor(private bookService: BookService) {} 

    ngOnInit() { 
    this.bookService.getBook(this.bookID) 
     .subscribe((book) => { 
     this.book = book; 
     }); 
    } 
} 

Aksi takdirde kısaca Kullanabileceğin düşünüyorum iki şekilde vurgulamak gerekir https://angular.io/docs/ts/latest/cookbook/component-communication.html

açıklanmıştır birkaç seçenek vardır. ngOnChanges

export class Book implements OnChanges { 
    @Input() book: IBook; 
    ngOnChanges(changes: {[propKey: string]: SimpleChange}) { 
    for (let propName in changes) { 
     // handle updates to book 
    } 
    } 
} 

fazla bilgi https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Veli ve çocuklarla

Intercept giriş mülkiyet değişiklikleri ile ikinci bir yaklaşımla bir örnek ekleyebileceğiniz bir hizmet

@Injectable() 
export class BookService { 
    books = new Subject<IBook>(); 

    getBook(id): Observable<IBook> { 
    return this.http.get(this.url + '/' + id) 
    .map(d => { 
     let book = this.extractData(d); 
     this.books.next(book); 
     return book; 
    }) 
    .catch(this.handleError); 
    } 
    ... 
} 

@Component({ 
    selector: 'book', 
    providers: [] 
}) 
export class Book implements OnDestroy { 
    book: IBook 
    subscription: Subscription; 

    constructor(private bookService: BookService) { 
    this.subscription = bookService.books.subscribe(
     book => { 
     this.book = book; 
    }); 
    } 

    ngOnDestroy() { 
    this.subscription.unsubscribe(); 
    } 
} 

@Component({ 
    selector: 'store', 
    providers: [BookService] 
}) 
export class Store { 
    book: IBook; 

    constructor(private bookService: BookService) { } 

    ngOnInit() { 
    this.bookService.getBook('1') 
     .subscribe((book) => { 
      this.book = book; 
     }); 
    } 
}