2016-08-18 5 views
10

Was ist besser für die Leistung und "eckigen Weg": Haben Sie viele asynchrone Pipes in der Ansicht oder einen Abonnenten in der Komponente mit Abmelden Aktion onDestroy?Angular 2: viele Async-Pipes vs one subscribe

Beispiel:

@Component({ 
    template: `<div> {{ post.title }} {{ post.author.name }} {{ post.category.name }} </div>` 
    ... 
    }) 
class AppComponent { 
    public post: Post; 
    public postSubscription; 

    ngOnInit() { 
    postSubscription = someObservable.subscribe((post) => { 
     this.post = post; 
    }) 
    } 

ngOnDestroy() { 
    postSubscription.unsubscribe(); 
} 
} 

oder

@Component({ 
    template: `<div> {{ postTitle | async }} {{ postAuthorName | async }} {{ postCategoryName | async }} </div>` 
    ... 
    }) 
class AppComponent { 
    public postTitle: Observable<string>; 
    public postAuthorName: Observable<string>; 
    public postCategoryName: Observable<string>; 

    ngOnInit() { 
    this.postTitle = someObservable.pluck('title'); 
    this.postAuthorName = someObservable.pluck('author', 'name'); 
    this.postCategoryName = someObservable.pluck('category', 'name'); 
    } 
} 

Antwort

3

Mit dem | async Rohr effizienter ist, weil Angular über Änderungen informiert wird. Beim ersten Beispiel werden die Bindungen in jedem Änderungserkennungszyklus geprüft.

+0

Aber wenn ich 'changeDetection' zu' ChangeDetectionStrategy.OnPush' modifiziere und im subscribe Block '' changeDetector.markForCheck() '? – dakolech

+0

Dann ist es wahrscheinlich das gleiche wie die Verwendung der asynchronen Leitung. –

0

Das ist eine gute Frage. Ich kam oft über die Entscheidung, mehrere asynchrone Pipes für die gleiche beobachtbare, vs abonnieren OnInit und Abbestellen onDestroy.

Verwandte Themen