在角1我们避免了从超过模板表达式,如内部调用函数ng-repeat="item in vm.getFilteredItems()",因为属性更改无关的结果getFilteredItems会导致功能重复和不必要的重新计算的消化,这通常会导致性能问题的规模.相反,我们绑定到对象,并基于事件(例如ng-repeat="item in vm.filteredItems)进行计算.
在Angular 2中,脏检查过程已经过优化,但是当组件级别的任何属性发生更改时,仍会调用组件模板中调用的函数,无论该函数是否依赖于这些属性.如果使用不当,我预计这会导致相同的性能问题.
以下是Angular 2中不同方法的简化示例:
// 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;
});
}
}
-
// no function binding
@Component({
selector: 'nofunc',
template: `
<input [(ngModel)]="searchTerm" (ngModelChange)="search($event)" placeholder="searchTerm" />
<div *ngFor="let …[ngModel]当通过上使用单向绑定时<input>，在输入中键入字符始终会将字符添加到 的<input>值中。问题是，如果[ngModel]表达式继续返回其现有值，则该<input>值不会刷新。
这是一个简单的例子：
@Component({
selector: 'my-component',
template: `
<input type="text" [ngModel]="foo.bar" />
`
})
export class MyComponent {
private foo = {
bar: 'baz'
};
}
我希望无论用户输入如何，输入始终显示“baz”，但事实并非如此。
我寻找这种行为的原因是针对 ngrx/store/redux 应用程序，其中 an<input>的值应由单向流动的状态确定。我在 Plunker 上创建了一个示例用例，其中 Misko Hevery 的描述不应该是可编辑的。模型确实没有改变，但<input>无论用户输入什么，都会显示出来。
在“No trackBy”部分，它可以正常工作，但这只是因为 Angular 正在重绘所有 DOM 元素，这会强制进行适当的重新评估（但这不是解决方案）。添加disabled或readonly属性<input>对我来说不是一个可接受的答案，因为组件应该不知道不允许更改此字段的潜在复杂状态逻辑。
我在 React Redux 中看到了这种行为，我想知道如果我们无法阻止用户改变自己的视图，我们如何在 Angular 2 中使用单向绑定。
Ember CLI有一个命令(ember addon <addon-name>),它将设计一个新项目,通过npm安装到其他Ember CLI项目中.这些"插件"项目也可以使用内置的"虚拟应用程序"独立构建和提供,该虚拟应用程序充当插件的假消费者,用于测试和演示目的.这对于快速创建在业务应用程序之间共享但也独立部署的样式指南/组件库非常有用.
我正在为Angular CLI项目寻找一个等价物,并且希望CLI能够提供类似的方法来创建插件,因为它基于Ember CLI.是否可以从另一个Angular CLI应用程序中使用Angular CLI应用程序,或者我是否必须使用手动(gulp/grunt)构建过程创建自己的"插件"？
谢谢!