当我使用Angular和TypeScript时,我尽量写出尽可能精确和严格的代码。回顾一些较旧的代码,我发现了如下代码片段:
export class UserComponent {
@Input() user: User;
getName(): string {
return this.user.firstname + " " + this.user.lastname;
}
}
在某个地方,这个组件的用法如下:
<user-component [user]="u"></user-component>
显然,这样的组件是用来显示用户的,整个GUI依赖于用户实例(值)。
编译器不会抱怨这个定义,即使属性user
可能是未定义的。但是,如果另一个开发人员忘记将输入属性user
传递给此组件,则在运行时中将出现错误:Trying to access firstname of undefined
。
您如何解决此问题?就我个人而言,如果没有在custructor中定义属性,我更希望编译器抛出一个错误。或者,有没有一种方法可以“强制”输入属性,这样当使用组件时没有给出输入属性时,编译器/Angular CLI将失败?
到目前为止,我只看到以下选项:
1)将用户属性定义为@Input() user: User | undefined
。然后,我们必须在每个使用user属性的方法中编写一个繁琐的if/else。
2)定义@Input() user: User = new User()
。但是,我仍然必须以某种方式检查我们是否有一个有效的user实例用于许多用途。
发布于 2020-05-12 14:49:56
一个可能对您有用的技巧是在选择器中定义具有所有必需字段的组件。在您的情况下,它将是
@Component({
selector: 'user-component[user][anotherRequiredField]'
})
发布于 2020-05-12 14:37:45
最简单的方法是使用模板中的安全导航操作符。https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths
{{user?.firstname}}
不会抛出错误。
如果需要检查输入,可以使用setter。
@Input() set user(user: User) {
if (user) ...
https://stackoverflow.com/questions/61753087
复制相似问题