angular父子组件传值和ngOnChanges的使用
父组件中定义: public detailbaseinfo = {}; //详情基本信息
其中detailbaseinfo 数据会通过请求获取
父组件传值给子组件如下:
子组件接收父组件传值
import { Component, Inject, OnInit, OnChanges, SimpleChange , Input, Output, EventEmitter } from '@angular/core'; @Component({
selector: 'app-introduce',
templateUrl: './introduce.page.html',
styleUrls: ['./introduce.page.scss'],
})
export class IntroducePage implements OnChanges {
@Input() detailbaseinfo: any; //接收课程信息
constructor(@Inject('urlConfig')private urlConfig) { } ionViewWillEnter() { } ngOnChanges(changes:{[propKey:string]: SimpleChange }) {
this.detailbaseinfo = changes['detailbaseinfo']['currentValue'];
console.log(this.detailbaseinfo)
} }
detailbaseinfo 在请求完成之前传给子组件的值为{},那么不符合实际需求,则需用到ngOnChanges去监听,当父组件中请求完成,detailbaseinfo 会被赋值,此刻才满足需求
angular父子组件传值和ngOnChanges的使用的更多相关文章
- Angular 父子组件传值
Angular 父子组件传值 @Input @Output @ViewChild 新建一个头部组件 newsheader 在主组件引用 news 组件,在news组件添加 newsheader 组 ...
- angular 父子组件传值 用get set 访问器设置默认值
private _PLACEHOLDER: string; @Input() public set placeholder(v: string) { this._PLACEHOLDER = v; } ...
- angular 4+中关于父子组件传值的示例
home.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-hom ...
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
- 使用react进行父子组件传值
在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- vue父子组件传值加例子
例子:http://element-cn.eleme.io/#/zh-CN/component/form 上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...
- Vue中非父子组件传值的问题
父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...
- 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值
1.创建组件的方法 函数组件 class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...
随机推荐
- acwing 517. 信息传递
地址 https://www.acwing.com/problem/content/description/519/ 有 n 个同学(编号为 1 到 n)正在玩一个信息传递的游戏. 在游戏里每人都有一 ...
- Educational Codeforces Round 76 (Rated for Div. 2) C. Dominated Subarray 水题
C. Dominated Subarray Let's call an array
- golang数据结构之快速排序
具体过程:黑色标记代表左指针,红色标记代表右指针,蓝色标记代表中间值.(依次从左往向下) //QuickSort 快速排序 func QuickSort(left ]int) { l := left ...
- Windows下cwrsync客户端与rsync群辉存储服务端定时数据同步
cwRsync简介 cwRsync是Rsync在Windows上的实现版本,Rsync通过使用特定算法的文件传输技术,可以在网络上传输只修改了的文件. cwRsync主要用于Windows上的远程文件 ...
- 最热门的 10 个 Java 微服务框架
1.Spring Boot Java 构建 Spring 应用程序已经有很长一段时间了,Spring Boot 是 Spring 的一个特定版本,它通过对配置细节的处理,使微服务构建更加简便.创建 S ...
- redis集群之Cluster
RedisCluster 是 Redis 的亲儿子,它是 Redis 作者自己提供的 Redis 集群化方案. 相对于 Codis 的不同,它是去中心化的,如图所示,该集群有三个 Redis 节点组成 ...
- win10下mysql5.7的安装与配置
Win10下MySql5.7的安装与配置 下载 官网下载地址 选择免安装版即可, 解压 将下载的压缩包解压到你想要放置MySQL的目录,避免中文空格. 示例:D:\devtools\mysql-5.7 ...
- Redis for OPS 03:数据安全与持久化
写在前面的话 通过前两节,除了安装部分,其它的更多的是作为了解,除非我们面向实际的开发,当然知道更多总是好的,这样才有吹牛逼的资本. 从本节开始我们主要谈谈作为一个运维,在处理 Redis 的维护的时 ...
- hello tensorflow,我的第一个tensorflow程序
上代码: import tensorflow as tf if __name__=='__main__': g = tf.Graph() # add ops to the user created g ...
- Hive表导出成csv文件
命令 hive -e " set hive.cli.print.header=true; #将表头输出 select * from data_table where some_query_c ...