qq_44327851的博客

Angular CLI 默认使用 Webpack 打包，通常不需要手动。以减少 HTTP 请求（优化加载性能）（如合并多个库文件）

Zone.js 是 Angular 的核心依赖之一，它是一个能够在 JavaScript 执行过程中创建、维护和销毁"执行上下文"的库。简单来说，它能够拦截和跟踪异步操作，为 Angular 的变更检测机制提供基础支持。

当用户提交这个表单时：浏览器会直接向 [action] 绑定的 url 发送一个 POST 请求（跳过 Angular 的拦截）。服务器处理请求后，返回的响应会在新标签页（target="_blank"）中显示。由于 ngNoform 的存在，Angular 不会介入表单的提交过程。

变量：可以存储颜色、字体等值嵌套规则：更清晰地组织样式结构混合(Mixins)：可重用的样式块继承：通过@extend共享样式运算：在样式表中进行数学计算函数：自定义或使用内置函数处理样式值模块化：将样式分割为多个文件。

今天我们要探讨的是表单的formControlName 和 change() 方法之间的含义以及关系。1. 基本含义：在响应式表单中将 DOM 元素与实例关联：仅用于响应式表单（Reactive Forms）将表单控件绑定到模板中的输入元素自动同步表单值和视图自动处理验证状态(change)：原生 DOM 事件，当元素值变化并失去焦点时触发：可用于任何 HTML 表单元素是标准 HTML 事件触发时机：值改变且元素失去焦点后不同于(input)事件（实时触发）2. 两者关系。

updateValueValidity()是Angular中AbstractControl 类的一个方法，它用于重新计算控件的验证状态和当前值。每当你动态更改表单控件的验证器、异步验证器、值或者状态时，都需要调用 updateValueValidity()来确保表单或控件的状态被正确更新。关注的是表单控件的状态变化（有效性、禁用状态等）。关注的是表单控件的值变化。两者都是Observable类型，可以通过方法来监听其变化。

Oracle公司提供的技术认证，证明持有人在Oracle数据库、Java等领域的专业能力（如OCP Java SE 11 Programmer）。

同源策略是一种在 web 浏览器中实施的安全策略，它限制了不同来源的网页之间的交互和数据共享。同源策略是 web 浏览器的核心安全机制，它通过限制不同源之间的交互来保护用户数据和隐私。：假设有两个 iframe，分别加载了不同来源的网页，浏览器会禁止一个 iframe 脚本访问另一个 iframe 中的 DOM，因为这违反了同源策略。，浏览器会认为这两个地址的源不同，通常会阻止该请求，除非目标服务器明确允许跨源请求（如通过 CORS）。：在一些早期的浏览器中，JSONP 被用来绕过同源策略，进行跨域请求。

禁用的控件不影响表单的验证结果：即使你禁用了某个控件，它的值也不会影响 form.valid 的计算。换句话说，禁用控件依然会被视为通过验证。控件禁用后不参与表单验证：禁用的控件不会触发验证规则，也不会影响form.valid​​​​​​​ 的计算。因此，即使某个控件的值不符合验证规则，只要它被禁用，form.valid依然会被计算为true。

在日期时间格式化中，常见的时间格式占位符用来表示年、月、日、小时、分钟、秒等信息，通常用于格式化和解析日期时间。下面是以及它们的使用场景。

用户发起请求：用户输入 URL 或点击链接，浏览器向服务器发起请求。请求服务器：通过 HTTP 向服务器发送请求。服务器处理：服务器返回 HTML 文件（静态或动态生成）。浏览器接收响应：解析 HTML，构建 DOM。加载外部资源：请求并加载 CSS、JS 和其它资源。构建渲染树：合并 DOM 和 CSSOM，生成渲染树。布局：根据渲染树计算元素的位置和尺寸。绘制：为每个元素绘制样式和内容。合成：将不同层合成，形成最终图像。呈现：页面显示在用户屏幕上，用户可以交互。

switchMap 主要用来处理连续的、异步的数据流，确保只处理最新的请求或事件，避免了不必要的请求或操作。在需要取消上一个操作并只关注最后一次结果时，switchMap 是一个非常有用的工具。switchMap会在源 observable 发出新值时触发。每当输入框的值发生变化时，switchMap会取消上一个请求并发起新的请求。防抖操作符（如 debounceTime）可以避免每次输入都触发请求，只在用户停止输入后才发起请求。

属性/指令*ngIf作用通过 Angular 逻辑控制完全添加或移除元素通过 CSS 控制隐藏元素但保持元素在 DOM 中隐藏元素但元素仍然在 DOM 中且占用空间DOM 元素移除是（移除元素及其占用的空间）否（元素仍在 DOM 中）否（元素仍在 DOM 中）空间占用否（元素完全不占用空间）否是（元素仍占据空间）生命周期钩子会触发进入和离开 DOM 时的钩子（如ngOnInit不会触发钩子不会触发钩子渲染性能可能较低，尤其是频繁添加/移除元素时（动态地销毁和创建 DOM 元素，可能更高效）

项目的X页面，HTML是通过循环数组进行数据展示，其中进入页面有两个入口，第一个入口是通过点击某个label进行路由跳转，进入页面之后触发API获取页面数据并进行处理（API进行时会显示loading），API加载完，loading消失，随之展示数据在页面上。第二个入口是点击另一个页面的table的row进行路由跳转，进入页面后会对从table row传过去的数据进行处理并进行展示。更奇怪的问题来了，第一个入口并不存在上述问题，只有第二个入口存在问题！setTimeout这个方法一定要有！

HTMLCollection 是一个类数组对象，表示由 DOM 方法返回的元素集合，例如。方法返回的就是 HTMLCollection 对象。方法可以根据类名获取所有具有相同类名的元素，返回一个 HTMLCollection。方法可以根据 CSS 选择器获取所有匹配的元素，返回一个 NodeList。方法可以根据元素的 ID 属性获取到对应的 DOM 元素。方法可以根据 CSS 选择器获取匹配的第一个元素。通过 CSS选择器 获取多个元素集合。通过 CSS选择器 获取单个元素。通过 类名 获取元素集合。

媒体查询（Media Queries）是用于在网页设计中根据用户设备的特征（如屏幕宽度、高度、设备类型等）来应用不同的样式表规则的技术。它允许开发者根据用户设备的特性动态调整网页的布局和样式，以提供更好的用户体验。：指定CSS样式应用的设备或媒体类型。allprintscreenspeech：指定CSS样式根据设备或环境的不同特性而应用或不应用。媒体特性必须用小括号括起来，并且包含一个或多个表达式，例如设备的宽度或高度。widthheightresolution：使用的逻辑操作符包括andnot和。

响应式设计（Responsive Design）是一种网页设计和开发的方法论，旨在使网站能够适应各种不同的设备和屏幕尺寸，包括桌面电脑、平板电脑和手机等移动设备。其核心理念是一个网站能够根据访问者的设备特性自动调整布局、内容和功能，以提供最佳的用户体验。

是 HTML5 中的一个布尔属性，用于指定页面加载后自动将焦点（即光标）放在指定的输入字段上，使用户可以立即开始在该字段中输入内容。属性是 HTML5 中用于表单验证的一个属性，它用于指定一个正则表达式，以验证输入字段中的值是否符合特定的模式。属性，可以更灵活地组织和布局表单元素，使其可以跨越不同的 HTML 结构，而仍然能够在逻辑上属于同一个表单。属性，因为只有一个元素可以拥有焦点，这可能会导致意外的用户体验，特别是在用户期望焦点在其他元素上时。属性，但在某些较旧的浏览器版本中可能不被完全支持。

HTTP 415错误状态码是指"Unsupported Media Type"（不支持的媒体类型）。这通常发生在客户端向服务器发送请求时，请求中包含的媒体类型（例如Content-Type头部）不被服务器支持或识别的情况下。

在前端和后端的同时开发中，从事应用程序的 Angular 开发人员必须能够与虚假后端进行交互，以便通过模拟后端数据来创建 UI。其中我们就会使用和的npm 包来帮助我们完成这个过程。

transform属性应用于2D 或 3D转换。可以实现倾斜、移动、旋转、缩放这四类动画效果。

CSS滤镜（Filter）是一种强大的视觉效果工具，允许开发者在不借助额外图像处理软件的情况下，直接通过CSS对HTML元素（如图片、文本、背景等）应用各种图像处理效果，如模糊、颜色变化或者其它图形处理等，这些效果可以在浏览器中进行硬件加速。属性应用到HTML元素上的一系列图像处理函数。这些函数可以单独使用，也可以组合在一起，产生丰富多彩的视觉效果。下面这位大大的博文， 图文并茂，大家有兴趣真的可以看一下哦！，但它们在实现方式、效果和应用场景上有一些不同。

则用于在超时时切换到备用的 Observable。如果你想要处理 Observable 的超时情况并执行特定的操作，可以使用。如果你想要在超时时切换到备用的 Observable 进行替代操作，可以使用。用于处理 Observable 的超时情况，而。

​​​​​ HTTP 的三次握手是指在建立 TCP 连接时，客户端和服务器之间进行的三步握手过程。这个过程确保了双方都能够互相通信，并且同步了彼此的序列号和确认号。

下面的三种方法在Enter键提交表单时都要额外处理一下，因为Enter键会换行，这样会带来一定的高度样式的不正确性，所以这时我们可以用。模拟textarea文本域实现高度自适应；scrollHeight手动设置。Enter键换行的默认行为。textArea自适应高度。第二种方法：通过用JS中的。来设置文本域自适应高度；textArea的高度；

需要注意的是，retry 字段是可选的，如果不设置 retry 字段，浏览器会使用默认的重新连接时间间隔。因此当在 onerror 事件处理程序中编写重连逻辑时，可能会导致浏览器和服务器之间的 EventSource 连接频繁断开和重连，从而在网络面板中出现大量的 SSE 连接。下面的示例中，我们将 eventSource 对象的 retry 字段设置为 3000，表示在连接中断后，浏览器会每隔 5 秒尝试重新连接服务器一次。当连接中断后，浏览器会根据 retry 字段的值来确定重新连接的时间间隔。

文本数据和二进制数据是前端数据处理两种常见的数据类型。这两种数据类型在表示和处理方式上存在一定的异同。

调用 controller.abort()方法会关闭与服务器的连接，但不会触发 EventSource 对象onclose()事件处理程序。相反，调用 controller.abort() 方法会立即关闭连接，而不会触发任何事件处理程序。在上面的示例中，我们首先创建了一个AbortController实例，并从中获取一个signal对象，然后将该signal对象传递给fetch请求的配置中。当需要取消请求时，调用 controller.abort()方法即可中止请求，并触发一个 AbortError错误。

在 CSS 中，有一些样式是可以被子元素继承的，也有一些样式是不会被子元素继承的，同时要注意继承性质，覆盖继承、继承链等在继承过程发挥的作用。

在 JavaScript 中，单向数据绑定和双向数据绑定是两种常见的数据绑定方式。在 Angular 中，单向数据绑定和双向数据绑定的实现方式有插值表达式、属性绑定等

服务器接收到预请求后，会检查这些头部信息，并根据请求头部中的信息来决定是否允许实际请求。HTTP预请求（Preflight Request）是CORS（跨域资源共享）机制中的一种请求，用于在实际的跨域请求之前进行一次预检请求，以确定是否可以安全地发送实际请求。当服务器接收到预请求后，应该返回一个带有合适的CORS头部信息的响应，以表示服务器是否支持跨域请求，并确定是否允许实际请求。预请求的目的是确保跨域请求的安全性，防止潜在的安全风险。这种机制可以有效地防止跨域请求可能带来的安全风险。

缓存最新值就是保存了最新值的意思，也就是说BehaviorSubject 从它订阅开始就一定会收到值，要不就是初始值，要不就是最新一次的next()方法的传递的值。换句话说，BehaviorSubject从订阅开始就会向订阅者发送值，确保订阅者能够获取到初始值或者最新值。但是Subject对象是收到从它订阅开始之后next()传递的最新值，订阅时不会收到任何值！会缓存最新的值，并在有新的订阅者订阅时立即发送这个最新值给订阅者。因为它缓存的是最新的值，并不是缓存所有值！

部分信息解析汇总：1** 信息类 例如：2** 响应成功：表示动作被成功接收、理解、接受 例如：3** 重定向：为了完成指定的动作，必须接受进一步处理 例如：4** 客户端错误类：请求包含错误语法或者不能正确执行 例如：5** 服务端端错误类：服务器不能正确执行一个正确的请求 例如：

在项目中使用 ngModel 时，有时候我们需要将 ngModel 设置为独立模式，以避免父表单控件对其进行干扰。例如，当我们在一个表单中使用自定义组件，并且这个组件内部也有自己的 ngModel 时，为了避免冲突，我们可以将这个 ngModel 设置为。在自定义组件中使用 ngModel 时，为了避免父表单控件对其进行干扰，可以将 ngModel 设置为 standalone 模式。可以帮助我们更好地管理 ngModel 的行为，避免不必要的干扰和冲突，以及提供更灵活的配置选项。

是用来向元素的特定部分添加特殊样式的关键词，例如::before用于在元素内容前插入内容，::after用于在元素内容后插入内容等。伪元素创建了一个虚拟的元素，允许开发者在元素内的特定位置插入样式和内容。是用来向特定选择器添加特殊效果的关键词，例如:hover用于鼠标悬停时改变元素样式，:active用于元素被点击时改变样式等。伪类是用来选择元素的特定状态或行为，而伪元素是用来选择元素的特定部分。伪类以单冒号（:）开头，伪元素以双冒号（::）开头。

则是指的一个对象，它具有类似数组的特性，比如有一个 length 属性表示数组的长度，可以通过索引访问其中的元素。数组对象通常是通过类数组对象或类似数组的对象转换而来，但它并不是真正的数组。到这里，我们已经搞清楚类数组对象的概念，那它可以转换成数组吗？下面是类数组对象转换成数组的5种方法。：指的是一个数组，其中的每个元素都是一个对象。这些对象可以包含多个属性，形成一个包含多个对象的数组结构。实际上，它们都是用来存储一组有序数据的数据结构，只是在不同的语境下有不同的称呼。

公司项目是angular，所以实际中使用，我是要考虑到应用Angular框架中，下面是我想到的一些方法汇总，欢迎大家检阅！1.在组件的HTML模板中使用*ngFor指令和setTimeout函数实现逐字显示效果; 2.使用RxJS的interval操作符和map/pluck/scan/bufferCount操作符;3.使用rjxs的timer操作符和map/pluck/scan/bufferCount操作符.

毋庸置疑，现在chatGTP是非常火热的，在这个时候公司项目中提到了AI智能对话UI显示界面模仿chatGTP的UI一样，显示答案不能一蹴而就，而要逐字逐字显示。至此，我先学习一个JS版本的。

在学习angular页面更新的时候，也就是在我之前的博客中都会提到使用angular中手动触发更新检测（通过调用。方法）来解决，但是其实在实际的项目开发中，是不太推荐这种方法解决的，下面我将介绍这个办法的优缺点和需要注意的事项。

在学习如何在Angular中实现文字逐字显示的过程中，我发现要保证用户的体验感的关键点在于：如何确保实时更新.html页面的内容显示，保证及时在UI界面反应出后端返回的数据。那如何解决这个问题呢？下面是上面博客的进阶版学习---->这篇博客主要是。，话不多说，直接上代码。