Nakavtun hesaplanmış gözlenebilir

Question

Angular2 sürümü Knockout'tan Angular2'ye yazdığım bazı kodları aktarmaya çalışıyorum. Nakavtda hesaplanan gözlenebilirlerin yapısını gerçekten çok seviyorum; bu, bu işlevin sonuçlarının yalnızca obezler değişime bağlı olduğunda hesaplandığı anlamına gelir.

Açısal olarak bir işlevi kullanabileceğimi biliyorum ve yalnızca sonuçları değiştirdiğinde görünümü günceller (sonuçları birçok kez hesaplasa bile), ancak hesaplamam sıralama yapıyor, bu yüzden yalnızca Girdiler gerçekten değiştiğinde yapılacak işler.

Ben bunun altında linkler angularjs ile bunu nasıl açıklamak buldum ama

http://www.jomendez.com/2015/02/06/knockoutjs-computed-equivalent-angularjs/ KO.Computed equivalent in Angular/Breeze Initializer

Answer 1

Ben ele alacak angular2 (daktilo) o çevirmek için nasıl emin değilim TypeScript kullanıyorsanız getter. Ayrıca, Bileşeninizin ChangeDetectionStrategy.OnPush özelliğini kullanarak, yalnızca özelliklerden birinin değiştiğinde bağlamanın değerlendirildiğinden emin olursunuz. İşte Plunker geçerli: https://plnkr.co/edit/PjcgmFCDj8UvBR7wRJs2?p=preview

import {Component,ChangeDetectionStrategy} from 'angular2/core' 

@Component({ 
    selector:'person', 
    template:`<div> 
       <div> 
        First Name 
        <input [(ngModel)]="firstName"> 
       </div> 
       <div> 
        Last Name 
        <input [(ngModel)]="lastName"> 
       </div> 

       {{fullName}} 
      </div>`, 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 
export class Person{ 
    firstName = ''; 
    lastName = ''; 

    get fullName(){ 
    return this.firstName + ' ' + this.lastName; 
    } 
} 

Answer 2

ko.observable en yakın analog Subject hatta BehaviorSubject ve ko.computed için size Burada Observable.combineLatest

kullanabilir tür merhaba dünya örneği:

import 'rxjs/add/operator/map'; 
import {Component} from '@angular/core'; 
import {Observable, BehaviorSubject} from "rxjs"; 

@Component({ 
    selector: 'app-root', 
    template: `<div> 
    <button (click)="both()">both</button> 
    <button (click)="first()">first</button> 
    <button (click)="last()">last</button> 
    <button (click)="ageNow()">age</button> 
    <hr /> 
    fullName: {{fullName | async}} 
    <hr /> 
    age: {{age | async}} 
    </div>` 
}) 
export class AppComponent { 
    firstName = new BehaviorSubject(''); // aka this.firstName = ko.observable('') 
    lastName = new BehaviorSubject(''); 
    age = new BehaviorSubject(0); 
    fullName = Observable.combineLatest(this.firstName, this.lastName) // aka this.fullName = ko.computed(...) 
    .do(values => console.log('computed fired')) 
    .map(values => values.join(' ').trim()); 

    both() { 
    this.first(); 
    this.last(); 
    } 

    first() { 
    this.firstName.next('foo ' + Date.now()); 
    } 

    last() { 
    this.lastName.next('bar ' + Date.now()); 
    } 

    ageNow() { 
    this.age.next(Date.now()); 
    } 
} 

Ve Muhtemelen formlarla çalışmayı isteyeceksin, o zaman bu gibi bir şey olacak:

import 'rxjs/add/operator/map'; 
import {Component} from '@angular/core'; 
import {Observable, BehaviorSubject} from "rxjs"; 
import {FormGroup, FormControl, FormBuilder} from "@angular/forms"; 

@Component({ 
    selector: 'app-root', 
    template: `<form [formGroup]="form"> 
     <input formControlName="firstName" /> 
     <input formControlName="lastName" /> 
     {{fullName | async}} 
    </form>` 
}) 
export class AppComponent { 
    form:FormGroup; 
    firstName = new FormControl(''); 
    lastName = new FormControl(''); 
    fullName = Observable.combineLatest(
    this.firstName.valueChanges.startWith(''), 
    this.lastName.valueChanges.startWith('') 
).map(values => values.join(' ').trim()); 

    constructor(private fb:FormBuilder) { 
    this.form = fb.group({ 
     firstName: this.firstName, 
     lastName: this.lastName 
    }); 
    } 
} 

Örnek formda, FormControl için değil, valueChanges akışındaki derlemeyi izlediğimizi de unutmayın, bunun için başlangıç ​​değerini de tanımlarız.

Eğer | async her zaman akışına abone olabilirsiniz şablonlardaki boru ve onları bileşen özellikleriyle