Angular 属性绑定的最佳实践

属性绑定的最佳实践

通过遵循一些指导原则，你可以使用属性绑定来帮助你最大限度地减少错误并让代码保持可读性。

本章包含代码片段的工作实例参阅现场演练 / 下载范例。

避免副作用

模板表达式的计算应该没有明显的副作用。使用模板表达式的语法来帮你避免副作用。通常，正确的语法会阻止你为属性绑定表达式中的任何东西赋值。该语法还会阻止你使用递增和递减运算符。

产生副作用的一个例子

如果你的表达式改变了你所绑定的其它东西的值，那么这种更改就会产生副作用。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 ​的期待。