通过遵循一些指导原则,你可以使用属性绑定来帮助你最大限度地减少错误并让代码保持可读性。
模板表达式的计算应该没有明显的副作用。使用模板表达式的语法来帮你避免副作用。通常,正确的语法会阻止你为属性绑定表达式中的任何东西赋值。该语法还会阻止你使用递增和递减运算符。
如果你的表达式改变了你所绑定的其它东西的值,那么这种更改就会产生副作用。Angular 可能显示也可能不显示更改后的值。如果 Angular 确实检测到了这个变化,就会抛出一个错误。
作为一项最佳实践,请只使用属性和仅会返回值的方法。
模板表达式应该求值为目标属性所期望的值类型。比如,如果目标属性需要一个字符串,就返回一个字符串;如果需要一个数字,就返回一个数字;如果需要一个对象,就返回一个对象。
在下面的例子中,ItemDetailComponent
的 childItem
属性需要一个字符串。
<app-item-detail [childItem]="parentItem"></app-item-detail>
你可以通过查看 ItemDetailComponent
来确认这种预期,其中的 @Input()
类型为 string
:
@Input() childItem = '';
AppComponent
中的 parentItem
是一个字符串,这意味着 [childItem]="parentItem"
中的 parentItem
应该求值为一个字符串。
parentItem = 'lamp';
如果 parentItem
是其它类型的,你同样应该把 childItem
这个 @Input()
指定为那个类型。
在这个例子中,ItemListComponent
是 AppComponent
的子组件,其 items
属性需要一个对象数组。
<app-item-list [items]="currentItems"></app-item-list>
在 ItemListComponent
中,@Input()
items
的类型为 Item[]
。
@Input() items: Item[] = [];
注意 Item
是一个有两个属性的对象。一个是 id
,一个是 name
。
export interface Item {
id: number;
name: string;
}
在 app.component.ts
中,currentItems
是一个对象数组,与 items.ts
中的 Item
对象具有相同的形态:有一个 id
,有一个 name
。
currentItems = [{
id: 21,
name: 'phone'
}];
通过提供一个形态相同的对象,你就可以满足 Angular 在计算表达式 currentItems
时对 items
的期待。