Angular笔记

浏览器前缀知识

webkit- (谷歌,Safari,新版Opera浏览器,所有基于WebKit 内核的浏览器)
-moz- (火狐浏览器)
-o- (旧版Opera浏览器)
-ms- (IE浏览器 和 Edge浏览器)
css前缀

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease; 

js api前缀

let requestAnimationFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.oRequestAnimationFrame ||
                            window.msRequestAnimationFrame;

监听具体表单控件

在html 中定义了 FromGroup,怎么来监听用户输入值的变化呢?
可以使用 valueChanges 来订阅变化。
首先,实例化FromGroup

 create(){
    this.supplierFrom = this.fb.group({
              merchantName: [null, [Validators.required]],  
        });
}

然后,定义一个 onFormChanges 方法来监听 form的变化

onFormChanges(): void {
    // 监听整个表单
    // this.supplierFrom.valueChanges.subscribe(val => {
    //   console.log('onFormChanges', val);
    // });
    // 监听具体表单控件
    this.supplierFrom.get('merchantName').valueChanges.subscribe(val => {
      console.log('onFormChanges', val);
    });
  }

在ngInit 时调用以上两个方法

ngOnInit(): void {
   this.create();
    this.onFormChanges();
  }

JSON.stringify()和JSON.parse()

JSON.stringify()将对象、数组转换成字符串;
JSON.parse()将字符串转成json对象。

css禁止点击-pointerEvents

pointer-events 属性用于设置元素是否对鼠标事件做出反应。

 [style]="{ pointerEvents:i == tabNumber ?'none':'auto' }"

变更检测机制markForCheck()和detectChanges()区别

markForCheck() 和 detectChanges() 都是 ChangeDetectorRef 的方法,它们的作用是触发变更检测。

markForCheck() 的作用是标记组件或指令以及其子组件或指令为脏检查状态,但并不立即触发变更检测。这意味着,即使在此之后更改了组件的属性或状态,Angular也可能会等到下一次变更检测周期才会更新视图。markForCheck() 可以提高应用的性能,因为它只是通知 Angular,而不会立即触发变化检测。
而 detectChanges() 的作用是立即触发变化检测,即使组件或指令的状态并没有发生变化。这意味着,即使在此之前没有更改组件的属性或状态,Angular 也会立即更新视图并检查其子组件或指令的变化。这可能会导致不必要的性能开销,因此建议仅在必要时才使用 detectChanges()。
最佳实践是使用 markForCheck() 来标记组件或指令以及其子组件或指令为脏检查状态,然后让 Angular 在下一次变更检测周期中更新视图。仅在必要时才使用 detectChanges(),例如当需要立即更新视图时,或当使用第三方库时无法控制变更检测的时机时。

### 下载 Popper.min.js 文件的方法 对于希望获取 `popper.min.js` 的开发者来说,可以通过多种方式来实现这一目标。通常情况下,推荐通过官方渠道或可靠的分发网络 (CDN) 来获得最新的稳定版文件。 #### 使用 CDN 获取 Popper.min.js 最简单的方式之一是从流行的 CDN 中加载所需的 JavaScript 库。这不仅简化了集成过程,还可能提高性能,因为许多用户已经缓存了来自这些服务提供商的内容。例如: ```html <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2/dist/umd/popper.min.js"></script> ``` 这种方式不需要手动下载文件到本地服务器;只需将上述 `<script>` 标签添加至 HTML 文档中的适当位置即可立即使用 Popper 功能[^1]。 #### 从 npm 或 yarn 安装 如果项目采用模块化构建工具链,则可以直接利用包管理器如 npm 或 Yarn 进行安装。命令如下所示: ```bash npm install @popperjs/core # 或者 yarn add @popperjs/core ``` 之后可以根据具体需求引入特定功能模块,而不是整个库,从而减少打包后的体积并优化加载速度[^2]。 #### 访问 GitHub 发布页面下载压缩包 另一种方法是访问 Popper.js 的 [GitHub Releases](https://github.com/popperjs/popper-core/releases) 页面,在这里可以选择不同版本的 tarball 或 zip 归档进行下载解压操作。这种方法适合那些偏好离线工作环境或是想要定制编译选项的人群[^3]。 #### 手动克隆仓库 最后一种较为少见但也可行的办法便是直接克隆完整的 Git 存储库副本。这样可以获得开发分支以及历史记录等更多信息,适用于贡献代码或者深入学习内部机制的情况。 ```bash git clone https://github.com/popperjs/popper-core.git cd popper-core ``` 完成以上任一途径后便能成功取得所需版本的 Popper.min.js 文件,并将其应用于个人项目之中[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值