博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Angular 组件通讯、生命周期钩子 小结
阅读量:6582 次
发布时间:2019-06-24

本文共 953 字,大约阅读时间需要 3 分钟。

 

本文为原创,转载请注明出处:        文章:

http://www.cnblogs.com/zt-blog/p/7986858.html

 

组件接受参数:

1. 路由查询参数(ActivatedRoute:参数镜像、参数订阅两种方式)

2. Input传参(单向)

钩子: ngOnChange

 

组件间通讯:

1. Input传参(单向) 父 --> 子

2. Output传参(单向) 子 --> 父

3. 中间人(父组件/服务作为他的子组件们的中间人) 兄弟 <--> 兄弟

   一般是用服务来做中间人的,而不常用父组件!

4. 模板引用变量(也称模板本地变量)  -- 父组件调用自组建

  父模板中调用子组件的属性、方法: #name

  父组件中调用子组件的属性、方法: @ViewChild()

 

  钩子: ngAfterViewInit   ngAfterViewChecked

5. 内容投影: 子组件中通过ng-content指令投影父组件的内容,父组件可以向投影的内容绑定自己的属性。

  注: 被投影的片段不能使用子组件的属性,只能使用父组件的属性!

 

钩子: 下面是按执行顺序

Constructor

ngOnChanges  @Input

ngOnInit

ngDoCheck 变更检测

 

ngAfterContentInit    相关:子组件中通过ng-content指令投影父组件的内容。

ngAfterContentChecked

  ------ 子组件的上面六个钩子执行,直到没有自组件了 -----

ngAfterViewInit

ngAfterViewChecked

 

ngOnDestroy   跳转到新路由时,旧路由对应的组件被销毁。

 

 

其他:

ng-content 和 [innnerHTML] 都能绑定html内容,区别是:

1. ng-content是平台无关的,[innnerHTML] 只能用于浏览器平台

2. ng-content可以绑定多个内容片段,[innnerHTML] 只能绑定一个。

3. ng-content只能使用父组件的属性,[innnerHTML] 只能使用子组件的属性。

 

转载于:https://www.cnblogs.com/zt-blog/p/7986858.html

你可能感兴趣的文章
Java JDBC直连
查看>>
最近搭阿里云redis集群遇到的坑
查看>>
request方法
查看>>
贷款计算公式——java实现
查看>>
教你给IDEA安装插件
查看>>
在windows上安装curl
查看>>
使用EasyWechat为“WX公众号”增加一个访问统计的方案实现
查看>>
数据库的工具类
查看>>
Spring Cloud Consul综合整理
查看>>
95后美女当“妈”,养了对机器人双胞胎
查看>>
Dart 学习笔记2 - numbers数字 ,operator运算符号,if else 条件语句,for loop循环语句,mac环境安装Dart2...
查看>>
MaxCompute JOIN优化小结
查看>>
3.4 usermod命令 3.5 用户密码管理 3.6 mkpasswd命令
查看>>
关于css的水平,垂直居中
查看>>
修改(切换)当前数据库的UNDO表空间
查看>>
使用VM Tools让VMware虚拟机里的ubuntu能够共享Windows系统的文件夹
查看>>
怎样实现短信验证功能
查看>>
【2018.06.11学习笔记】【linux高级知识 12.13-12.16】
查看>>
阿里云宣布进入 Serverless 容器时代,推出弹性容器实例服务 ECI
查看>>
接收三个班级的各四名学员的成绩信息,然后计算每个班级学员的平均分
查看>>