Köşeli 2: Bileşen Şablonlarından İşlevlere Bağlama

Question

Açısal 1'de, arama işlevlerini, örn. ng-repeat="item in vm.getFilteredItems()", getFilteredItems sonucuyla ilişkili olmayan değişikliklerin, işlevlerin sık sık ve performans açısından sorunlara neden olan sindirimler üzerinde tekrar tekrar ve gereksiz şekilde yeniden oluşturulmasına neden olacağından. Bunun yerine nesnelere bağlıyız ve olaylara göre hesapladık (ör. ng-repeat="item in vm.filteredItems).

Açısal 2'de, kirli denetim işlemi en iyi duruma getirilmiştir, ancak işlev, bu özelliklere bağlı olup olmadığına bakılmaksızın, bileşen düzeyinde herhangi bir özellik değiştiğinde, bileşen şablonlarında çağrılan işlevler çağrılacaktır. Bunun yanlış kullanıldığında aynı performans sorunlarına yol açabileceğini umuyorum.

// no function binding 
@Component({ 
    selector: 'nofunc', 
    template: ` 
    <input [(ngModel)]="searchTerm" (ngModelChange)="search($event)" placeholder="searchTerm" /> 
    <div *ngFor="let name of filteredNames">{{name}}</div> 
    ` 
}) 
export class NoFuncComponent implements OnInit { 
    @Input() names:string[]; 

    searchTerm: string; 

    ngOnInit() { 
    this.search(this.searchTerm); 
    } 

    search() { 
    if (!this.searchTerm) { 
     this.filteredNames = this.names; 
     return; 
    } 

    this.filteredNames = this.names.filter((name) => { 
     return name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1; 
    }); 
    } 
} 

http://plnkr.co/edit/AAFknlJgso3D8F1w3QC1?p=preview

hala Açısal 2'de bir endişe bu mu -

// function binding in template 
@Component({ 
    selector: 'func', 
    template: ` 
    <input [(ngModel)]="searchTerm" placeholder="searchTerm" /> 
    <div *ngFor="let name of filteredNames(searchTerm)">{{name}}</div> 
    ` 
}) 
export class FuncComponent { 
    @Input() names:string[]; 

    filteredNames(searchTerm) { 

    if (!searchTerm) return this.names; 

    let filteredNames = []; 

    return this.names.filter((name) => { 
     return name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1; 
    }); 
    } 
} 

:

İşte Açısal 2'de farklı yaklaşımların basitleştirilmiş bir örnektir? Hangi yaklaşım tercih edilir ve neden? Teşekkürler!

Answer 1

Bir boru oluşturabilirsiniz. Borular (eğer pure) sadece bağlı olan değerler değiştiğinde çağrılır. Boru names değişiklikleri tanıması gerekiyorsa

@Pipe({ 
    name: 'search', 
// pure: 'false' 
}) 
class SearchPipe { 
    transform(names, searchTerm) { 
    if (!this.searchTerm) { 
     this.filteredNames = names; 
     return; 
    } 

    return names.filter((name) => { 
     return name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1; 
    }); 
    } 
} 

@Component({ 
    selector: 'func', 
    pipes: [SearchPipe], 
    template: ` 
    <input [(ngModel)]="searchTerm" placeholder="searchTerm" /> 
    <div *ngFor="let name of names | search:searchTerm">{{name}}</div> 
    ` 
}) 
export class FuncComponent { 
    @Input() names:string[]; 
} 

sonra pure devre dışı bırakılması gerekmektedir. names yerine üye eklenen veya kaldırılan farklı bir örneği ile değiştirilirse

, daha sonra pure iyi çalışır ve boru sadece names veya searchTerm değişiklik yürütülür.

İpucu devMode (varsayılan) değişim tespiti ise

iki kez çalışır ve boru kadar beklendiği gibi iki kez çağrılacak.