![](https://img-blog.csdnimg.cn/20190927151124774.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Angular
文章平均质量分 81
angular二三事
材女的进击
这个作者很懒,什么都没留下…
展开
-
Angular encapsulation视图封装模式
组件视图中的每一个元素,都有一个 _ngcontent 属性,它会标记出该元素属于哪个宿主的模拟 Shadow DOM。Emulated: 只有全局样式能进来,其他样式无法进来,组件样式也出不去(默认值)在组件的元数据设置encapsulation,可以分别控制每个组件的封装模式。当选择器相同且选择器优先级相同时,组件内部样式的优先级大于全局样式的优先级。None: 任何样式都能进来,组件的样式也都能出去。组件相当于是隔离状态,不受外界样式的影响。组件相当于是半隔离状态,受全局样式的影响。转载 2023-06-25 14:58:09 · 243 阅读 · 0 评论 -
每个 Angular 开发人员应该了解的关于 Zone.js 十件事
在 debug Zone 时,会观察到不同类型的任务:微任务和宏任务。通常乱说,从宏任务开始观察会更好,因为大多数问题都和宏任务有关。这两种任务有什么区别呢?简而言之,微任务被规划在当前任务之后立刻进行(在同一个 VM 轮询中),而宏任务则只会规划在下一个 VM 轮询中。你可以在Jake Archibald 的文章中了解更多的细节。转载 2023-06-21 14:32:55 · 223 阅读 · 0 评论 -
Angular :FormControl 和 FormGroup
FormControl和FormGroup是Angular中两个最基础的表单对象。1. FormControlFormControl代表单一的输入字段,它是Angular表单中的最小单元。FormControl封装了这些字段的值和状态,比如是否有效、是否脏(被修改过)或是否有错误等。比如,下列代码演示了如何在TypeScript中使用FormControl:/...转载 2019-08-16 11:23:34 · 10723 阅读 · 2 评论 -
Angular 常用拦截器
Http拦截器就是拦截发出的请求,对其进行统一添加额外处理,然后放行;对响应进行拦截并作出业务上的判断,决定是否给与返回。常见拦截器AuthInterceptor 自定义请求头,如 token 之类// AuthInterceptor.tsimport { Injectable } from "@angular/core";import { HttpEvent, HttpRequest, HttpHandler, HttpInterceptor } from "@angular/...转载 2020-07-29 17:49:25 · 1035 阅读 · 0 评论 -
Angular 几个好用的库
ngx-pagination :分页功能文档地址:https://www.npmjs.com/package/ngx-pagination@ng-select/ng-select :多选框文档地址:https://www.npmjs.com/package/@ng-select/ng-select@angular/materialAngular Material是包含Nav...原创 2019-08-16 13:45:55 · 211 阅读 · 0 评论 -
Angular ViewEncapsulation
在介绍 Angular ViewEncapsulation 之前,我们先来介绍一下 Web Components 标准。Web Components近年来,web 开发者们通过插件或者模块的形式在网上分享自己的代码,便于其他开发者们复用这些优秀的代码。同样的故事不断发生,人们不断的复用 JavaScript 文件,然后是 CSS 文件,当然还有 HTML 片段。但是你又必须祈祷这些引入的代...转载 2019-07-25 10:46:36 · 318 阅读 · 0 评论 -
Angular脏值检查
Angular Change Detection是一种强大的框架机制,可确保我们的UI以可预测和高效的方式表示我们的数据。可以肯定地说,更改检测仅适用于大多数应用程序,尤其是当它们不包含50多个组件时。您收到一个ExpressionChangedAfterCheckedError并需要解决它您需要提高应用程序性能我希望本文可以帮助您更好地了解Angular的变更检测。随意使用我的演示项目来试用不同的变更检测策略。转载 2023-06-21 15:28:43 · 435 阅读 · 0 评论 -
【Angular中的HTTP请求】- HttpClient 详解
不同版本的Angular,以上代码位置行数不同,但是文件位置都是一样的,大家可以通过以上关键字搜索就能找到相关代码。注入时,处理程序实例将请求分派到链中的第一个拦截器,然后分派到第二个拦截器,第三个拦截器,依次分派,最终到达。操作符基于请求信息新建的一个单播的 Cold Observable (数据流,原始的数据就是请求信息)。方法对请求进行了一个链式的处理流程:主要包括不定数量的拦截器的处理加上最后的。被订阅的时候,请求先经过拦截器的处理,最后通过浏览器 HTTP API 发出。转载 2023-06-20 10:33:39 · 670 阅读 · 0 评论 -
angular 双向数据绑定原理
这样,当一个异步操作(例如一个HTTP请求)完成后,Angular会自动检测组件的变化并更新视图。在Angular中,所有的数据绑定都是通过Observable实现的,当一个属性被绑定到一个表达式时,Angular会在这个属性上创建一个可观察对象,并且在这个对象上注册一个观察者,当这个属性的值发生变化时,会通知所有的观察者。当一个组件中的属性或者模板中的表达式发生变化时,Angular会创建一个变更检测器,并且在组件的变更检测树中遍历所有的子组件和指令,检测它们的属性是否也发生了变化。原创 2023-06-08 10:58:23 · 2735 阅读 · 0 评论 -
Angular终极教程
Angular的教程,清楚明了,卷起来吧原创 2023-02-20 16:17:39 · 6455 阅读 · 1 评论 -
使用 RxJS 处理多个 Http 请求
阅读 Angular 6/RxJS 最新教程,请访问前端修仙之路有时候进入某个页面时,我们需要从多个 API 地址获取数据然后进行显示。管理多个异步数据请求会比较困难,但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式,使用串行或并行的方式。基础知识mergeMapmergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象。合并 Observable 对象 ( jsBin)const sourc.转载 2020-08-23 21:03:36 · 2223 阅读 · 0 评论 -
Angular的多种数据绑定方式
Angular 提供了多种数据绑定方式。绑定类型可以分为三类,按数据流的方向分为: 从数据源到视图 从视图到数据源 双向:视图到数据源到视图 绑定类型 语法 分类 插值 属性 Attribute CSS 类 样式 {{expression}}[target]="expression"bind-target="expression"原创 2020-08-05 15:04:28 · 1498 阅读 · 0 评论 -
angular2双向绑定与变化检测
angular2双向绑定与变化检测很久很久以前,微软的公司出了一套桌面应用框架WPF,其中,有一个全新的模式:MVVM.而MVVM的核心机制,就是双向绑定.什么是双向绑定?这幅图诠释的很清晰, 框架维护了页面(View),数据(Data)之间的一致性,解放了可怜的程序猿.如今,MVVM已经是前端流行框架必不可少的一部分,web.android,ios也都有它.双向绑定,也是angular2的核心概念之一,angular2的双向绑定是这样的:data=>view : 数据绑定.模板语法 []view=转载 2020-07-14 16:21:32 · 815 阅读 · 0 评论 -
Angular: Module build failed (from ./node_modules/_sass-loader@7.1.0@sass-loader/lib/loader.js):
场景:当 ng serve 启动项目 时,会报错:ERROR in ./src/sass/styles.scss (./node_modules/_@angular-devkit_build-angular@0.11.4@@angular-devkit/build-angular/src/angularss-loader.js!./node_modules/_postcss-loader...原创 2019-12-18 11:07:12 · 4296 阅读 · 1 评论 -
@ngrx/store 7 & @ngrx/effects 7 + angular的使用
官方网址:https://v7.ngrx.io/guide/store@ngrx/store@ngrx/store是基于RxJS的状态管理库,其灵感来源于Redux。关键概念ActionsActions是NgRx中的主要模块之一。Actions表示从组件和服务中分派的唯一事件。从用户与页面的交互、通过网络请求的外部交互、与API的交互等等都可用action来描述。(可理解为...原创 2019-11-26 17:53:30 · 1269 阅读 · 0 评论 -
Angular2+ 面试题集锦
1. 生命周期钩子生命周期的顺序,见下图:ngOnChanges:当组件数据绑定的输入属性发生变化是触发,该方法接收一个SimpleChanges对象,包括当前值和上一个属性值。首次调用一定发生在ngOnInit前,值得注意的是该方法仅限于对象的引用发生变化时才会触发。 ngOninit:初始化指令或组件,在angular第一次显示展示组件的绑定属性后调用,该方法只会调用一次 ng...原创 2019-10-28 18:01:25 · 8386 阅读 · 0 评论 -
Angular UT : karma+jasmine+puppeteer 遇到的神坑!!!希望帮助到大家
1. puppeteer安装失败原因puppeteer是个啥在这就不多加赘述了,这里重点讲的是puppeteer安装失败的问题国内的小伙伴们使用puppeteer的时候应该都遇到这个问题,puppeteer会绑定最新版本的Chromium,使用npm ipuppeteer安装时下载速度之慢,有时甚至下载失败。解决方法:使用 淘宝镜像(本地可以,但是在git上公司不允...原创 2019-10-12 16:16:36 · 1551 阅读 · 0 评论 -
Angular 国际化i18n : ngx-translate的使用
ngx-translate库的安装先奉上 : ngx-translate 官网 和 GitHub的地址在Angular项目中,我们主要用到了 @ngx-translate/core 和 @ngx-translate/http-loader 这两个模块,core模块是此库的核心,http-loader 是一个通过http调用翻译文件的加载器模块。安装两包:npm install @ngx-...原创 2019-04-26 16:09:01 · 1516 阅读 · 0 评论 -
Angular error:由bootstrap版本引发的“血案”
源代码:在styles.scss中引入bootstrap:@import 'node_modules/bootstrap/scss/bootstrap';pakage.json文件中 "bootstrap":"^4.1.3"运行npm install的时候默认会安装bootstrap的最新版本,目前bootstrap的最新版本是4.3.1,问题来...原创 2019-02-26 17:01:16 · 311 阅读 · 0 评论 -
Angular:ERROR in node_modules/@types/jasmine/index.d.ts(138,47): error TS1005: ‘;‘ expected.
场景:在run ng test的时候,报错:ERROR in node_modules/@types/jasmine/index.d.ts(138,47): error TS1005: ';' expected.node_modules/@types/jasmine/index.d.ts(138,90): error TS1005: '(' expected.node...原创 2018-12-20 11:03:40 · 6770 阅读 · 2 评论