Angular应用开发中遇到的问题

记录在开发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";

---