![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
angular学习笔记
花心小坚果
来此分享自己工作中遇到的问题及解决方法,互帮互助,加油
展开
-
Can‘t bind to ‘ngForOf‘ since it isn‘t a known property of ‘xxx‘
Can't bind to 'ngForOf' since it isn't a known property of原创 2023-01-03 15:54:02 · 689 阅读 · 0 评论 -
angular2+ 路由传参监听
今天工作中遇到一个问题,大致为:从a路由跳转到b路由携带参数,我这里使用的是queryParams传参但是此参数为变量,而每次跳转时都需要监听此路由参数的改变触发回调做另一些操作,所以这里我们需要使用route中的订阅去监测路由的变化并在回调中做相应的操作...原创 2021-05-28 16:53:45 · 308 阅读 · 0 评论 -
Ant Design样式库样式修改&&模块样式私有化
我们在前端项目开发的过程中,我们经常需要使用到一些样式库,比如常用的Ant Design,Bootstrap等等,我们经常需要修改他们的内置样式,但是往往各种尝试在自己的css中添加样式却无法覆盖它们(后续有的话会继续更新)/deep/目前最有效的修改样式库的方法实际效果如下ex.模块样式私有化angular为例,每个模块的样式都是独立的,那么这里的话我们可以使用 :host 前置标签使样式私有化,如下希望能帮到有需要的人...原创 2021-05-18 17:06:08 · 461 阅读 · 0 评论 -
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked
今天在code时遇到ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 类型报错,其实各站也有详细解释及解决方案,我在此写写自己简单的理解及解决方案用做笔记出现此报错的原因个人总结为一句话:在angular变更检测之后更改了某些值,angular为了防止模型数据与ui视图数据不一致产生的以本人此次报错为例我在此处添加了一个表单并且使用表单的验证是否通过控制“确定”按钮的禁用与原创 2020-12-10 16:48:48 · 9822 阅读 · 3 评论 -
angular2+ 基于Renderer2监听浏览器窗口变化
我这里暂时用过的就是使用Renderer2监听浏览器窗口变化,使用方法也很简单首先在控制器中引入Renderer2随后在视图初始化(ngAfterViewInit)后引入Renderer2监听事件,在浏览器窗口发生变化时,调用回调函数仅做笔记,感谢指正...原创 2020-06-28 10:24:22 · 918 阅读 · 0 评论 -
angular2+项目实用操作笔记(八) Resolve 路由守卫
当页面进行渲染的时候,可能会出现页面dom渲染太快而数据请求不及时造成的页面部分数据未请求到的情况,虽然这里可以用ngIf进行判断,但考虑页面渲染数据量大小的情况,还是推荐使用路由守卫首先在需要路由守卫的页面文件夹创建一个路由守卫文件,接着将需要进行请求的service引入其中,调用这些需要获取数据的方法最后在组件中中引入路由,路由中获取的data的数组便是整个路由守卫中获取的值组成的,将其分别赋值给页面变量即可仅做笔记,感谢指正...原创 2020-06-24 14:54:13 · 349 阅读 · 0 评论 -
angular2+项目实用操作笔记(七) 自定义管道
当项目中有多个页面需要对数据进行处理而官方不存在想要的管道时,可自定义管道进行数据处理(以过万数量简化为例)创建自定义管道文件 ng g p xxx(管道文件名)自定义方法后将其引入便可以在组件上使用了仅做笔记,感谢指正...原创 2020-06-21 11:25:15 · 302 阅读 · 0 评论 -
angular2+项目实用操作笔记(六) InjectionToken(令牌)优化接口地址
3.使用InjectionToken(令牌)定义固定端口地址将令牌放入serves.module中,之后再引入各个页面服务方法,使代码可读性以及可维护性更强,不会造成每次调用都重复写接口地址,在接口地址发生更改时也只需要更改这一个地方通过依赖注入,在使用请求的时候便可直接使用了ex:由于生产环境我们使用build --prod进行过打包,所以可以通过environment.production 来判断是否为生产环境而选择调用生产接口或测试接口仅作笔记,感谢指正...原创 2020-06-18 11:10:15 · 539 阅读 · 0 评论 -
angular2+项目实用操作笔记(五) 路由懒加载
关于路由懒加载的方法其实很简单首先在需要进行路由懒加载的页面routing-module中将其path置为空字符串(例下图home页面)接着在app-routing.module.ts中使用loadChidren导入home模块即可多个页面以此类推仅作笔记,感谢指正...原创 2020-06-15 11:21:39 · 293 阅读 · 0 评论 -
angular2+项目实用操作笔记(四) http拦截器的使用
在services新建一个文件夹,在其中创建一个通常状态下的拦截器文件,下图拦截器对请求信息不做任何处理 // common.interceptor.tsimport { Injectable } from '@angular/core';import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';import { Observable } from 'rxjs';@Inj原创 2020-06-07 14:40:22 · 387 阅读 · 0 评论 -
angular2+项目实用操作笔记(三) OnPush变更检测策略
由于中大型项目避免不了存在组件嵌套的状况,而angular的变更检测机制默认为检测完根组件再向其叶(子)组件进行检测,叶组件检测完再向其叶(子)组件依次下去进行检测,这样会导致每次变更检测都会进行所有组件的state检测,这样无疑增加了视图的渲染时间和增加服务器的负担所以对于子组件的属性的变化由输入属性决定的子组件可以为其添加changeDetection: ChangeDetectionStrategy.OnPush变更检测策略当启用OnPush变更检测策略后,若非输入属性发生改变,否则变更检测将会原创 2020-05-29 11:10:05 · 756 阅读 · 0 评论 -
angular2+项目实用操作笔记(二) app.module减负
默认的大多杂项module都会在app.module中引入,但是这样无疑会给加载运行带来负担,并且也不利于后期代码维护管理对于一次性加载module所以我们可以将一次性加载的例如组件module放入其他module中统一加载再在app.module中调用此module,例:放在core.module中由于上图appModule会引入一次此module,故在此module构造函数中加入方法若此module再被其他module引入则会抛出一个错误,避免被重复引入对于泛用型module有许多modu原创 2020-05-23 11:07:33 · 303 阅读 · 0 评论 -
angular2+项目实用操作笔记(一) 数据类型规范
自定义数据类型建立自定义数据类型文件夹并在其中编辑自定义数据类型,比如你获取的到的数据列表主要需要的是这几个属性就将其添加进去之后使用获取此类数据使用此类型的话更标准仅作笔记,感谢指正...原创 2020-05-17 15:29:08 · 383 阅读 · 0 评论