Angular相关
文章平均质量分 55
汪喆_Jack
本人热爱开发, 喜欢学习各种IT技术,了解新技术,希望和志同道合的伙伴切磋,相互交流!
展开
-
Debug Angular Application
Prerequisitesnpmangular@cliPrepare ApplicationInit an Angular Application by Angular-CLIAdd configuration to start UI Application npm run startClick the run button to start your UI application then check the log in the console and validate in lo原创 2021-05-26 23:07:49 · 234 阅读 · 1 评论 -
Angular6以ng serve方式启动时指定环境方法及关联知识点
一.踩坑1.问题来源如何自定义环境并在启动时指定环境2.解决方案使用configuration参数启动项目,如ng serve --configuration=local or ng serve -c local启动名为local的环境环境的定义在angular.json文件中(architect下build和serve都要添加环境配置),如下所示"configurations...原创 2019-07-04 11:10:31 · 9524 阅读 · 4 评论 -
Angular疏漏知识点补充
一.易疏漏知识点使用Cli安装Angular项目但不导入对应依赖ng new 项目名 --skip-install项目结构e2e端对端测试文件node_modules依赖包src源码karma.conf.js测试文件polyfills.ts填充库文件,在angular加载之前首先加载test.ts测试的入口文件.editorconfig编辑器配置文件angula...原创 2019-06-09 22:28:36 · 324 阅读 · 0 评论 -
Angular表单处理
一.模板驱动表单1.模板驱动型表单导入FormsModule,ngModel属于FormsModule的,故若想使用ngModel也需要导入FormsModulemodule导入实例代码import { FormsModule } from '@angular/forms';@NgModule({ imports: [ FormsModule//引入模驱动表单...原创 2019-04-18 23:43:30 · 666 阅读 · 0 评论 -
Angular结构型指令、模块和样式
一.结构型指令1.*的作用*ngIf / *ngFor是Angular的指令,*是一个语法糖,避免复杂写ng-template<a *ngIf="user.login">退出</a>等同于<ng-template [ngIf]="user.login"> <a>退出</a></ng-template>...原创 2019-04-16 21:05:36 · 731 阅读 · 0 评论 -
Angular属性型指令
一.指令1.什么是指令组件是一种自带模板的指令结构型(Structural)指令和属性型(Attribute)指令2.Renderer2和ElementRefAngular不提倡直接操作DOM对于DOM的操作应该通过Renderer2来进行ElementRef可以理解成指向DOM元素的引用二.拖拽指令实例代码创建directive的moduleng g m direc...原创 2019-04-16 18:42:52 · 1154 阅读 · 1 评论 -
Angular6: 引入的Datepicker插件没有样式
1.问题来源项目引入ngx-bootstrap UI组件库,其中包含datepicker,但是使用时发现没有样式2.问题解决思路加载的样式是在angular.json中的styles中指定的,不是加载组件自动带样式安装ngx-bootstrap的时候虽然安装了datepicker,但是没有样式,需要执行ng add component xxx指令,为项目添加对外部库的支持,从而在a...原创 2019-04-12 08:24:26 · 973 阅读 · 0 评论 -
Angular 6: no component factory found,did you add it to @NgModule.entryComponents?
1.问题来源编写ngx-admin时使用自定义modal component时报错,模态框无法弹出2.问题解决思路看到提示,果断就在entryComponents中引入了定义的modal然而还是报错…又import了ModalModule,解决了这个问题3.调查原因使用loadChild模式加载对应路由下的组件时,是懒加载模式,即需要的时候才会加载,所以如果路由走的是懒加载...原创 2019-04-12 08:16:40 · 6945 阅读 · 1 评论 -
ChangeDetection状态检测策略
一.什么是ChangeDetection用于检测程序内部状态,然后反映到UI上引起状态变化的内容【通常都是异步的】:Events事件触发、XHR发送的Http等请求通过接收内容改变某些状态、Timers定时任务事件执行通常是通过ApplicationRef监听NgZone的onTurnDone,然后执行检测程序状态通常会构建CD树(ChangeDetection树),Ang...原创 2019-04-11 22:42:33 · 3500 阅读 · 0 评论 -
Angular依赖注入
一.依赖注入简介依赖注入是一种设计模式Angular提供的DI框架Injector注入者:利用API,创建依赖的Object实例Provider告诉Injector如何创建Object(是构造函数创建还是工厂函数创建…)Object表示创建好的对象二.依赖注入框架1.显性依赖// Id类class Id { getInstance(type:string...原创 2019-04-11 22:29:05 · 253 阅读 · 0 评论 -
Angular2 Directive讲解
新需求一来,说添加鼠标点击组件外部关闭组件的功能,作者果断就学习了一下Directive,接下来将从我的处理过程出发完成Directive的讲解。一.基于Directive功能的点击组件外部关闭组件功能编写Directive实现:监听document的click事件,并获取event的target内容(DOM),判断是否是当前DOM的子元素(通过注入的ElementRef),从而决定是否...原创 2019-04-12 08:06:48 · 973 阅读 · 0 评论 -
Angular动画
Angular动画一.核心概念1.State和Transition动画其实就是从一个状态过渡到另一个状态,状态本身包含形状颜色大小等等,State就是定义状态而Transition是定义如何过渡,state和transition构成了trigger2.Animate函数Animate规定了具体怎样过渡,比如时间、过渡的速度等,animate有多个重载形式animate数字类型:表...原创 2019-02-17 20:44:01 · 561 阅读 · 0 评论 -
Angular中ChangeDetection检测程序内部状态
一.ChangeDetection简介1.什么是ChangeDetection用于检测程序内部状态,然后反映到UI上引起状态变化的内容【通常都是异步的】:Events事件触发、XHR发送的Http等请求通过接收内容改变某些状态、Timers定时任务事件执行通常是通过ApplicationRef监听NgZone的onTurnDone,然后执行检测程序状态通常会构建CD树(ChangeDe...原创 2019-01-09 00:23:00 · 522 阅读 · 0 评论 -
使用Angular Material组件打造页面
一.项目工程结构搭建1.创建项目使用脚手架工具进行搭建ng new Enterprise --skin-install --style=scss--skin-install表示跳过npm安装(因为很慢),或则使用-si--style=scss表示期望样式风格是scss(使用Angular Material做主题支持,需要使用scss特性去做)cnpm install使用cnpm进行...原创 2018-12-11 16:40:20 · 1287 阅读 · 0 评论