记录在开发Angular应用时遇到的问题以及解决方案。
问题 3
前提:在Angular应用的组件中使用响应式表单进行数据校验,使用FormBuilder服务
的 group()
方法来构建一组FormControl
实例。
需要监听其中控件的值的变化时,由于控件的类型为AbstractControl类型
,可以使用它的valueChanges()
方法,该方法返回一个多播 Observable(可观察对象),每当控件的值发生变化时,它就会发出一个事件 —— 无论是通过 UI 还是通过程序。
在页面表单数据提交中使用updateValueAndValidity()
方法重新计算控件的值和检验状态,该方法参数信息如下:
updateValueAndValidity(opts: { onlySelf?: boolean; emitEvent?: boolean; } = {}): void
- 参数opts,可选,是一个object,默认值为’{}’,当更新和进行有效性检查之后,该配置项会决定控件如何传播变更并发出事件。
- onlySelf:如果为 true,则只标记当前控件。如果为 false 或没有提供,则标记所有直系祖先。默认为 false。
- emitEvent:如果为 true 或没有提供(默认),则当控件被启用时,statusChanges 和 valueChanges 这两个 Observable 都会发出最近的状态和值。 如果为 false,则不会发出事件。
- 返回值:void
问题:由于updateValueAndValidity()
方法的参数中emitEvent属性的值同时影响statusChanges()
和 valueChanges()
方法。如果不设置emitEvent属性值,则其会触发控件上的valueChanges()
方法,导致一些问题。如果设置emitEvent属性值为false,则表单状态校验会出现问题。
解决方法:updateValueAndValidity()
方法中不传值,在监听控件值的回调方法中增加值的校验。
由于在表单提交的方法中,控件的值已经固定,再次触发valueChanges()
方法的时候,观察者的方法中得到的值和控件的值相等,此处增加两种是否相等的判断,如果相等的话则不做处理。
this.validateForm.controls['dataNo'].valueChanges.subscribe(_res => {
if (this.validateForm.value.dataNo!== _res) {
this.getDataList(_res);
}
});
问题 2
问题:在Angular应用中,图标不显示,控制台报错(提示the icon not exist or is not registered)
报错信息如下:
core.js:6014 ERROR Error: [@ant-design/icons-angular]:the icon user-o does not exist or is not registered.
at IconNotFoundError (ant-design-icons-angular.js:160)
at MapSubscriber.project (ant-design-icons-angular.js:339)
at MapSubscriber._next (map.js:29)
at MapSubscriber.next (Subscriber.js:49)
at RefCountSubscriber._next (Subscriber.js:72)
at RefCountSubscriber.next (Subscriber.js:49)
at Subject.next (Subject.js:39)
at ConnectableSubscriber._next (Subscriber.js:72)
at ConnectableSubscriber.next (Subscriber.js:49)
at CatchSubscriber.notifyNext (OuterSubscriber.js:4)
解决方案:
NG-ZORRO官网提供了两种方式来加载图标资源文件:静态加载与动态加载
建议使用动态加载的方式来加载图标。
动态加载图标文件只需要配置 angular.json 文件
:
{
"assets": [
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
]
}
问题 1
问题:在Angular应用中,引用ng-zorro-antd组件时,自身的样式不生效。
解决方法:在项目的src/styles.less
文件中引入ng-zorro-antd自身样式文件。
@import "~ng-zorro-antd/ng-zorro-antd.less";