时间戳

首页 > 解决方案 > 为什么大多数 Angular UI 组件不使用对象来配置输入？

angular - 为什么大多数 Angular UI 组件不使用对象来配置输入？

问题描述

我正在学习 Angular 及其生态系统，包括像 Material 2 和 ng-zorro 这样的 UI 工具包。

根据他们的源代码，他们@Input为每个允许的配置使用装饰器。

此代码来自材料 2：

@Input() mode: 'push' | 'over' | 'side';
@Input() autoFocus: boolean;

这是来自 ng-zorro：

@Input() nzWidth: number;
@Input() nzCollapsedWidth: number;

实际输入不止这些，因此，我想知道为什么他们不定义接口甚至类并命名它config，如下所示：

@Input() config: MatSidenavConfig;

参考： 与应用程序组件中的包进行通信的正确方法是什么？

有什么我们应该关心的吗？

=====更新=====

我在 StackBlitz 创建了一个测试：https ://stackblitz.com/edit/angular-1o67xy

使用或不使用配置对象@Input都是功能性的；不知道我是否做错了。

标签： angulartypescript

解决方案

我们不使用对象来配置输入的原因可以在 Angular 官方文档中找到

https://angular.io/guide/lifecycle-hooks

Angular 仅在输入属性的值发生变化时才调用该钩子。Angular 并不关心配置自己的属性是否已更改。配置对象引用没有改变，所以从 Angular 的角度来看，没有需要报告的改变！

为了解决这个问题，我们需要实现 ngDoCheck() 每当运行更改检测时都会调用它，这允许我们在那里实现一些逻辑，比如记住旧值并将它们与新值进行比较

为了简单地避免所有这些繁琐的逻辑，而不是通过对象传递值，我们通过原语传递它们。

希望这可以帮助。

推荐阅读