dongnihao的博客

现在遇到的问题是 C组件是使用NzModalService 来打开模态窗口，这样是能打开的，但是A组件使用Iframe，使用url来打开B组件，会报错。

通过将需要导出的组件、服务或指令集中在顶层入口文件中，可以更好地管理这些依赖关系，并确保任何使用你的库的开发人员都能够正确地安装和配置这些依赖项。总之，将组件、服务或指令导出到顶层入口文件中是为了确保其他模块或应用程序能够访问并正确使用你的库中的功能。这样可以提供良好的可见性、统一的访问点和更好的依赖关系管理。统一访问点：通过将所有需要被其他模块或应用程序使用的内容导出到顶层入口文件中，可以提供一个统一的访问点。可见性：如果你想让其他模块或应用程序能够使用你的组件、服务或指令，你必须将它们导出。

子组件接收到的modalRef是来自于父组件属性的引用。通过使用装饰器将modalRef声明为子组件的输入属性，可以让父组件传递模态框的引用给子组件。在父组件中，当创建模态框并获得模态框引用后，通过将其赋值给子组件的modalRef然后，在子组件中，通过使用@Input()装饰器将modalRef这样，父组件中创建的模态框引用就可以通过modalRef输入属性传递给子组件，并且子组件可以使用该引用来进行操作，如关闭模态框。对于@Input()

你的答案是正确的，我现在有一个附加的需求，让所有的表格都自适应宽度。我的要求是，对于所有的table元素，我希望宽度自适应，并且里面的每个单元格都是平均分配宽度的。我的问题是：我要做一个打印HTML页面功能，这个页面的表格是动态生成的，具有多个表格，现在面临的问题是，在第一页末尾无法放下这一整个表格，如何做到将这个表格分。现在，代码会将表格之前其他 DOM 元素的高度累加，并与表格高度一起比较来决定是否需要对表格进行分割。你是希望计算表格之前其他 DOM 元素的高度，而不仅仅是表格上半部分的高度。

Angular 不使用静态视图的视图容器，而是在特定于子组件的节点内保存对子视图的引用。它是一个无形的容器，可以用来组织和控制模板中的结构和行为，但不会在最终渲染的 HTML 中生成任何额外的标记。因此，为了正确解决删除子组件或任何 DOM 元素的任务，有必要首先创建嵌入视图或宿主视图并将其附加到视图容器。在宿主视图的情况下，可以从 create 方法返回的 ComponentRef 中检索与组件关联的视图。这段文字的意思是，在Angular中，有两种视图类型：嵌入视图和宿主视图。

本文主要解释了Angular是如何基于zone.js实现NgZone。同时阐述如何在不使用zone.js的情况下，实现手动更新。文章最后部分将描述自动跟新策略何时会失效。我看过的大多数文章都将Zone（zone.js）和NgZone与Angular中的变更检测紧密关联在一起。尽管它们确实有关系，但从技术上讲，它们并不是一个整体的部分。是的，Zone和NgZone用于自动触发由异步操作引起的变更检测。但由于变更检测是一个单独的机制，它可以在没有Zone和NgZone的情况下成功工作。

出现此问题的背景：我在Angular项目中对一个标签属性绑定了一个箭头函数，编译报错。

Angular使用这些策略来确定在运行父组件的变更检测时，是否应该检查子组件。为组件定义的策略会影响所有子指令，因为它们作为检查宿主组件的一部分而被检查。定义的策略无法在运行时被覆盖。默认策略，内部称为CheckAlways，意味着除非视图被显式分离，否则组件会进行常规的自动变更检测。而被称为OnPush策略，内部称为CheckOnce，意味着只有在组件被标记为脏时才会进行变更检测。Angular实现了自动将组件标记为脏的机制。

我在在使用angular 9版本，出现这样一个问题：我通过路由进入页面时候，会执行ngOnInit，切换到其他页面再切回，此时这个页面的ngInit不会主动执行。但是，如果你希望在切换路由后销毁之前的组件实例，可以使用路由器提供的一些选项来控制组件的销毁和重新创建行为。这是因为在路由导航过程中，Angular的路由器默认会重用已经创建的组件实例，而不是销毁和重新创建。然后，我们检查当前的路由路径是否与组件的路径匹配，并在匹配时调用自定义的方法。在Angular中，当一个组件被创建时，它的生命周期方法。

官网的demo的[nzFor]="control.controlInstance"，似乎是靠[formControlName]="control.controlInstance"来关联的。

在 Angular 中，使用构造函数注入的方式将服务注入到组件中是一种静态依赖注入的方式。这种方式需要在组件的构造函数中显式声明该服务的类型，并由 Angular 的依赖注入系统自动创建和注入该服务的实例。

我使用ngfor来循环出 网络请求的来的数据，但是这个请求是一个 Observable，当我在ngAfterInit中去获取的时候，尚未走到下一个事件循环中（这个事件循环就是网络请求后的赋值），此时查询到dom为null，那么当下一个事件循环后，dom被渲染且赋值，并且同步到html内。这时我对ngAfterInit（）中的 querySelecter（）方法套上一层 setTimeOut（），是最后执行的事件循环。

在上面的例子中，我们创建了一个FormControl对象来表示表单中的一个输入框，并使用valueChanges属性来监听它的变化。当用户在Input框中输入文本时，控制台将记录每次值更改的内容。Angular中的表单控件有一个valueChange属性。这个属性返回一个Observables对象，我们可以订阅它以获取表单控件值的变化。使用valueChanges属性能够非常方便地检测表单控件属性的变化，配合RxJS操作符使用也可以实现诸如过滤、节流和去抖等功能。

然后，使用@Pipe装饰器来定义管道名称和元数据。在管道的transform()方法中实现转换逻辑。该方法接收一个值作为输入，并返回相应的格式化字符串。您可以让管道接受这两个参数，也可以将它们硬编码在管道中。在上面的代码中，使用了toFixed()方法将数字转换为指定小数位数的字符串，然后使用正则表达式添加千位分隔符，最后添加货币符号。在需要格式化数字的地方，使用管道运算符（|）和管道名称来调用自定义管道。transform方法接受1+n个参数，第一个是pipe要处理的值，剩余为自定义的传入参数。

在这个例子中，我们创建了一个名为asyncUsernameValidator的异步验证器函数，并在用户名输入框的validators中使用它。在Angular中，异步验证器是一个函数，它接收一个控件作为参数，并返回一个Promise或Observable对象。同步验证器在控件值发生变化时同步检查控件的有效性，而异步验证器则允许在控件值变化后进行异步操作（如HTTP请求）来检查控件的有效性。异步验证器是指在表单验证过程中，使用一个异步操作（比如HTTP请求）来检查控件的有效性。

当这些异步操作执行时，它们可能会修改应用程序中的数据状态，但是由于 Angular 变更检测器不知道这些变化，因此它不会更新视图。在 Angular 应用程序中，当某些事件触发时（例如用户输入或 HTTP 请求完成），Angular 变更检测器会检测应用程序中的数据变化，并更新视图。当 Angular 应用程序中的某个事件触发时，例如用户输入或异步操作完成，Angular 会触发变更检测器来检测应用程序中的数据变化。当点击按钮时，我们会更新消息，并手动触发变更检测器来更新视图。方法来手动触发变更检测器。

需要注意的是，如果子组件在父组件之前初始化，则可能会丢失一些数据。为了解决这个问题，可以在。这样，当父组件中的数据发生变化时，子组件中的数据也会随之更新。看到一个很有意思的写法，使用RXJS + service 在父子间传递数据。对象来存储数据，这样可以在子组件初始化时获取最新的数据。的服务，并在其中定义一个。在这个例子中，父组件中的。方法来获取数据，并使用。

在实际开发中，zone.run()是一个非常常用的 API，特别是在处理异步任务时。除了zone.run(): 创建一个新的 Zone，并继承当前 Zone 的所有属性。这个 API 可以用来创建一个新的 Zone，从而更好地管理异步任务的执行和错误处理。例如，你可以使用来创建一个新的 Zone，并在其中运行一些代码，以便更好地控制异步任务的执行。: 在当前 Zone 中运行一个任务。这个 API 可以用来在当前 Zone 中运行一个任务，并跟踪任务的执行和错误处理。例如，你可以使用。

在 Angular 中，投影（Projection）是一种将组件的内容插入到另一个组件中的技术，也被称为内容投影（Content Projection）或插槽（Slot）。通过投影，我们可以将一个组件的内容插入到另一个组件中，从而实现组件的复用和组合。我们希望这个组件的标题和内容可以从外部传入，而不是在组件内部写死。当一个组件需要接受来自外部的内容时，可以使用投影来实现。属性来选择要插入的内容，这样可以避免将不需要的内容插入到组件中。在上面的示例中，我们使用。组件的标题和内容，从而实现了组件的复用和组合。

Angular：ViewChild与ContentChild的区别。

此class会在初始化期间，调用 ngOnChanges方法，他接受SimpleChange 对象，根据表达式当前的值来判断是否显示当前的内容。对象用于管理视图容器，是视图的集合。视图就是 包含指令，绑定，表达式的HTML元素区域。视图的创建通过ViewContainerRef类提供的各种API来实现。写这篇博客的原有：虽然Angular官网有提到指令的使用，以及相关Ref的使用，但是对相关Ref并没有做出详细的解释。向用户显示 ng-temple 元素的内容，然后使用。，也没有提供相关的详细文档。

在使用ngzorro时候碰到的，对中文或者其他字符进行排序。此属性接受一个布尔值。true 代表接受服务端排序。数据量较多情况下建议把排序放在后端。的前面，后面，或者二者相同。返回一个数字表示是否。

from的作用：axios返回的是一个promise，我们需要一个可观察对象，所以需要。switchMap 总是会抛弃前一个请求的结果，concatMap不会。pluck的作用：选择属性来发出，主要是用来提取嵌套的属性。很常见的场景，先获取用户的Token再获取用户信息。最后打印出的是最后一个数据流发出的数据。操作符把promise转为可观察对象。也是创建了一个可观察对象。

attr.xxxx]='属性值' //xxxx是自定义的标签属性，‘属性值’别加双引号。如果是angular页面里的变量，直接写变量就可。这两个都是元素的样式属性，class相当于这个属性是静态的，是一个常量。而ng-class的属性是根据if来判断来选择应用不用的样式，因此它是动态的。attr.xxx 用于设置自定义属性，网上的说法作用是通过自定义属性属性名获取元素或者值。换句话说，ngClass可以在里面直接用写一些js逻辑（条件判断）同理，ngStyle也是动态的。

需要注意的是 观察者对象有三个object：next error complet。加一点魔法，ES6结构赋值，公司代码经常会看见有人这么写，只能说对新手不太友好啊。tips：RXJS所有的API都只会来自 rxjs和rxjs.operators。简单理解：看作一个事件发射器，或者一个代理Agent。只是作为多播的一个中转站。回传的订阅对象就是subscription。简单理解：这一整个过程。将Observable的。

此Tutorial很有用：澄清一些概念上的东西：1. Async pipe和管道是一样的用法，只不过之前是对数据进行处理，这边变成了对observable和promise的处理2. 语法上，字面意思 直接使用 async{{async 管道作用于一个Observable或者Promise，并返回它发出的。当新值到来时，async管道就会把该组件标记为需要进行变更检测。当组件被销毁时，async管道就会自动取消订阅，以消除潜在的内存泄露问题。

在 component 之间通信，我们会用到 Subject，BehaviorSubject，AsyncSubject，ReplaySubject 这四种 subject，它们都是Hot Observable，Hot Observable 不管有没有被订阅都会源源不断的发送值。在用这些操作符，比如 take(1)，拿到 Observable 发送的第一个值之后，RxJs 会主动的停止当前的 Observable，也就是销毁当前 Observable，并不需要手动再调用 unsubscribe()取消订阅。

前置笔记:NGZORRO：一种Angular页面性能优化手段_董厂长的博客-优快云博客事情是这样的，今天在看NGZORRO时候看见这么一句话。OnPush模式，性能卓越。🤔那我就来看看antdesgin是怎么做出性能优化的。所以“this.cdRef.markForCheck();”这句话只能引起一次变化检测，如要多次，则要多次的运行这句话，如果以上代码功能要改成3秒后开始计时，只要将this.timer == 3改成this.timer >= 3就行了。.........

也就是说在 GrandChild component 中也会触发执行变化检测，如果 GrandChild component 中还有它自己的 child component，会继续触发它的 child component 的变化检测。在这个从上到下的变化检测流中，一旦 child A component 中的变化检测已经完成了，任何在 GrandChild component 或者更低层级的 component 都不允许去改变 child A component 中的属性。A组件从接口到拿到新数据，然后。.

Subscription是一个对象，表示一种可被处置的资源，通常指代一个Observable流的执行过程。Subscription有一个重要的方法unsubscribe()，不需要参数，仅仅用来释放掉subscription实例所...问题描述：使用Angular+NGZORO时候，组件库的下拉框或时间选择框会出现滚动页面，然后漂移的问题。实际的想法是，滚动页面的时候，要么下拉框消失，要么随着页面滚动。那么想法就是，当用户滚动的时候会发出一个流stream，以此创建一个可观察对象observable。...

事情是这样的，今天在看NGZORRO时候看见这么一句话。OnPush模式，性能卓越。🤔那我就来看看antdesgin是怎么做出性能优化的。所以“this.cdRef.markForCheck();”这句话只能引起一次变化检测，如要多次，则要多次的运行这句话，如果以上代码功能要改成3秒后开始计时，只要将this.timer == 3改成this.timer >= 3就行了。...

Observables是多个值的惰性推送集合。它填补了下面表格中的空白首先理解pull和push。pull直接理解为使用者主动拿来用。push理解为数据发送者推送出去，使用者等待数据流动到，并且接受。那么observable就是多个值的推送合集，或者直白粗暴理解，多个promise的集合。.....................

Zone.js将会对每一个异步操作创建一个task。一个task运行于一个Zone中。通常来说，在Angular应用中，每个task都会在“Angular”Zone中运行，这个Zone被称为NgZone。一个Angular应用中只存在一个AngularZone，而变更检测只会由运行于这个NgZone中的异步操作触发。......

写代码时候遇到数组更新后，视图不更新。一般的解决方案是重新解构赋值。原因的话，其实一开始就想到了自己写Vue项目中遇到的问题。当时把annotations放到一个数组中，然后展现到视图层，让用户预览自己的所有pdf注释，然后遇到了注释数组更新，视图层不更新的问题。复习一下Vue2数据响应原理，（ 注：Vue3响应式改成了Proxy听说Vue3响应式原理变成了Proxy_董厂长的博客-优快云博客）官方的解释很清晰：当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue

今天做项目中，一个input元素中同时添加了 失焦方法 和 失焦校验。今天发现偶发的会仅触发其中一个。和大佬同事讨论许久，发现可能是 二者其一 被另外一个冲掉了。如果触发了失焦校验，那么失焦方法就会失效。（偶发性）由于JavaScript为单线程，同一时间只能执行处理一个事件。解决方案1：setTimeOut 让另外一个失焦进入第二次的事件循环解决方案2：将click事件改为mousedown，让其优先于blur事件执行mousedown事件：当鼠标指针移动到元素上方，并按下鼠标按键时，

之前说起节流防抖，都是在事件内部用RXJS处理的（最开始写的是原生，设定计时器和开关）。后来看到别人把节流防抖放在 Angular 指令 Directives里，并且使用@output装饰器触发元素的指定事件。太妙了。...

今天在查angular生命周期时候嫖了一眼 AfterContentInit() / AfterContentChecked(), 发现投影这个概念太抽象了，然后找了找资料，发现称之为嵌入更合适----------------------------------------------------------以下是转载的资料---------------------------------------------AngularJS中指令的重要性是不言而喻的，指令让我们可以创建自己的HTML标记，它将自定义

事情是这样的。我要做一个上传按钮。产品经理不让用花里胡哨的NG组件库，那我只好自己写input上传了。由于button包不住input。那我就搞了邪道。<button nz-button nzType="primary" (click)="clckInputElement(uploadFileElement)" >上传报告<input #uploadFileElement type

Angular提交表单时，再次验证_董厂长的博客-优快云博客这两天在看别人代码时候思考, 表单校验不只需要实时校验和失焦校验。举个例子，如果使用失焦校验，当用户填完表单，直接提交，那么会触发input框的校验，但是数据可以直接传入数据库，那么对于前端来说，需要处理好提交按钮，使得表单二次校验，并且在不通过的情况下，不传入任何数据。代码层面，可以使用循环来二次验证表单控件 xxx.controls //xxx是你传入的表单 //使用循环来对表单控件修改状态，并且重新激活验证 for (const i in

问题是这样的，最近在做一个文件传输的task，传到前端加个签名又传回去。前端pdf库用的是“pdf-lib”PDF-LIB · Create and modify PDF documents in any JavaScript environment.https://pdf-lib.js.org/#examples很遗憾这个库不支持读取blob，但是或者可能在下载的时候用blob会更好？（等做到后期再说）关于Blob的使用_董厂长的博客-优快云博客_blob的使用最近的Task涉及文件的上传和下载