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 ...
随机推荐
- Linux系统中的截图功能(类似QQ、微信、Snipaste截图功能)
作者亲笔测试Ubuntu16.04,18.04,deepin15.11桌面版本Linux内核系统. 安装: 1. 终端命令黑框 2. sudo apt-get install flameshot(体积 ...
- acwing 47. 二叉树中和为某一值的路径
地址 https://www.acwing.com/problem/content/description/45/ 输入一棵二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径. 从树的根结 ...
- 解决问题:Red Hat Enterprise Linux 7 64 位 虚拟机安装后无法启动图形化
原因: 1.系统在创建时,没有安装图形化 2.系统在安装后,有降低内存的操作,内存过低无法启动桌面,以及其他 就原因一进行图形化安装: 1.VMware挂载Red Hat Enterprise Lin ...
- Codeforces Round #603 (Div. 2) F. Economic Difficulties dp
F. Economic Difficulties An electrical grid in Berland palaces consists of 2 grids: main and reserve ...
- 一道常被人轻视的web前端常见面试题(JS)
本文转载自站长之家,如有侵权问题,请联系我,马上删除. 面试题是招聘公司和开发者都非常关心的话题,公司希望通过它了解开发者的真实水平和细节处理能力,而开发者希望能够最大程度地展示自己的水平(甚至超常发 ...
- 深入理解Java中的Garbage Collection
前提 最近由于系统业务量比较大,从生产的GC日志(结合Pinpoint)来看,需要对部分系统进行GC调优.但是鉴于以往不是专门做这一块,但是一直都有零散的积累,这里做一个相对全面的总结.本文只针对Ho ...
- python基础(3):变量、常量、注释、基本数据类型
1. 变量 变量:将运算的中间结果暂存到内存,以便后续程序调⽤. 可以直接运算,如下所示: print(3+5+6) print((3+5+6)*12) print(((3+5+6)*12)+3) p ...
- kafka以及消息队列详解
Kafka 是LinkedIn 开发的一个高性能.分布式的消息系统. 用途:广泛用于日志收集.流式数据处理.在线和离线消息分发等场景. 1. Kafka 将消息流按Topic 组织,保存消息的服务器称 ...
- App iCON 尺寸
120*120 180*180 58*58 87*87 80*80 120*120
- laravel Error 笔记
一.有关CSRF验证 1.网址访问POST请求,如 127.0.0.1:81/delUser?id=1 网页请求是默认是GET请求方式,看返回的数据信息就知道,数据是以GET方式发送的,所以若路由中 ...