首页
关于
翻译
留言
统计
搜索
1
以太坊简介
742 阅读
2
搭建 OpenAI 代理
663 阅读
3
第 4 章 创建您的第一个 React 组件
550 阅读
4
如何读懂编译后的 JavaScript 代码
526 阅读
5
第 9 章 使用 Jest 测试 React 应用
477 阅读
JavaScript
TypeScript
后端
Web
移动
运维
杂项
登录
Search
标签搜索
React
翻译
Vue
组件
Angular
工程化
库
Hook
框架
优化
路由
Node.js
Flash
部署
算法
可视化
Debug
测试
兼容
Web3
Flying
累计撰写
267
篇文章
累计收到
2
条评论
首页
栏目
JavaScript
TypeScript
后端
Web
移动
运维
杂项
页面
关于
翻译
留言
统计
搜索到
30
篇
组件
相关的结果
2017-01-28
Angular 的生命周期
组件具有由 Angular 管理生命周期。Angular 创建它, 呈现它, 创建并呈现其子级, 在数据绑定属性发生更改时检查它, 并在将其从 DOM 中删除之前将其销毁。Angular 提供了生命周期钩子, 它提供了对这些关键生命时刻的可见性, 以及在它们发生时采取行动的能力。指令具有相同的生命周期钩子。ngOnChanges:当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit 之前。ngOninit:在第一轮 ngOnChanges 完成之后调用。ngDocheck:在每个 Angular 变更检测周期中调用。ngAfterContentInit:当把内容投影进组件之后调用。ngAfterContentChecked:每次完成被投影组件内容的变更检测之后调用。ngAfterViewInit:初始化完组件视图及其子视图之后调用。ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用。ngOnDestory:当 Angular 每次销毁指令或组件之前调用。其中 ngOnChanges、ngOninit、ngDocheck、ngOnDestory 四个生命周期也适用于指令。这些钩子的使用都遵循相似的模式:为了得到有关这些事件的通知,需要:声明组件指令类实现接口声明钩子的 ng 方法 (如 ngOnInit)每个方法名称都是 ng 加上钩子的名称。例如,对 OnInit 我们要声明 ngOnInit 方法, AfterContentInit 要声明 ngAfterContentInit 方法,以此类推。当 Angular 知道组件实现这些函数时, 它将在适当的时候调用它们。OnInit 和 OnDestroy在初始化组件属性以及初始化任何子组件属性之前调用 OnInit 钩子。同样, 当指令实例被销毁时, 调用 OnDestroy 钩子。如果每次销毁指令时需要进行清理, 则通常使用此方法。OnChanges 和 DoCheck在我们的一个或多个组件属性被更改后调用 OnChanges 钩子。ngOnChanges 方法接收一个参数, 它指示哪些属性已更改。每当 Angular 变化检测机制注意到任何指令属性发生更改时, OnChanges 实现的默认通知系统都会触发。但是, 有时此更改通知添加的开销可能太大, 特别是如果性能是一个问题。有时, 我们只是想做一些事情, 以防一个项目被删除或添加, 或者如果只有一个特定的属性改变, 例如。如果我们遇到上述情况之一, 我们就可以使用 DoCheck 方法。注意:OnChanges 钩子会被 DoCheck 钩子重写。因此, 如果我们实现这两个钩子, OnChanges 将被忽略。变更检测为了找出有哪些改变, Angular 提供不同 differ。differ 会对组件的特定属性进行计算,以确定它是否更改。有两种类型的内置 differs: 迭代 differ、键值对 differ。声明钩子的 ng 方法 (如 ngOnInit)AfterXXXAfterContentInit 钩子在 OnInit 之后调用, 在组件的内容初始化完成之后。AfterContentChecked 的工作原理类似, 不过它是在组件检查完成后调用。这里的 检查 是指检查是变更检测系统的检查。其他两个钩子:AfterViewInit 和 AfterViewChecked 是在上面的视图完全初始化之后触发的。这两个方法仅适用于组件, 而不适用于指令。此外, AfterXXXInit 钩子在指令生命周期中只调用一次, 而 AfterXXXChecked 钩子在每次变更检测周期后调用。如果感兴趣,大家可以参考我写的实例。
2017年01月28日
122 阅读
0 评论
3 点赞
2016-11-26
使用 Vue 组件插槽
为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个处理称为内容分发,Vue.js 实现了一个内容分发 API,使用特殊的元素作为原始内容的插槽。如果你是 AngularJS 用户,slot 就和的“transclude”差不多。
2016年11月26日
85 阅读
0 评论
3 点赞
2016-09-08
自定义 AngularJS Material 模态框
AngularJS Material 是基于 Material Design 设计方式,使用 AngularJS 实现的,该项目提供了一套基于 Material Design 系统设计的可重复使用的,易于测试的 UI 组件。它的 layout 使用的是 flex 来布局的,因此大家就知道了他的兼容性了,但是这个是未来的方向。
2016年09月08日
122 阅读
0 评论
5 点赞
2016-08-25
AngularJS 指令怎样传递函数参数
曾经做过一个下钻表格,就是页面一进来显示所有年份的收入,点击某年时会下钻显示该年每个季度的收入,点击某个季度时会下钻显示该季度每个月的收入。可以点击查看示例代码及效果。
2016年08月25日
108 阅读
0 评论
6 点赞
2016-08-05
AngularJS UI Bootstrap 渐进增强
UI Bootstrap 是 AngularJS 团队在 Bootstrap 基础上,用 AngularJS 实现的一组 UI 控件,包括 Tab 页,手风琴,下拉菜单,模态窗,日期选择等等。原本这些控件在 Bootstrap 里是用 Jquery 写的,而 UI Bootstrap 不依赖 Jquery。刚好最近项目也用到了不小 UI Bootstrap 控件,由于要对 IE8 优雅降级,所以 AngularJS 使用了 1.2.32,Bootstrap 样式使用了 3.x,UI Bootstrap 使用了 0.12.0。
2016年08月05日
148 阅读
0 评论
8 点赞
1
...
3
4
5
6