父组件中定义:  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的使用的更多相关文章

  1. Angular 父子组件传值

    Angular 父子组件传值 @Input  @Output  @ViewChild 新建一个头部组件 newsheader 在主组件引用 news 组件,在news组件添加 newsheader 组 ...

  2. angular 父子组件传值 用get set 访问器设置默认值

    private _PLACEHOLDER: string; @Input() public set placeholder(v: string) { this._PLACEHOLDER = v; } ...

  3. angular 4+中关于父子组件传值的示例

    home.component.ts import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-hom ...

  4. vue 非父子组件传值

    /*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...

  5. 使用react进行父子组件传值

    在单页面里面,父子组件传值是比较常见的,之前一直用vue开发,今天研究了一下react的父子组件传值,和vue差不多的思路,父组件向子组件传值,父通过初始state,子组件通过this.props进行 ...

  6. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  7. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

  8. Vue中非父子组件传值的问题

    父子组件传值的问题,前面已经讲过,不再叙述,这里来说一种非父子组件的传值. vue官网指出,可以使用一个空vue实例作为事件中央线! 也就是说 非父子组件之间的通信,必须要有公共的实例(可以是空的), ...

  9. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

随机推荐

  1. acwing 167. 木棒

    乔治拿来一组等长的木棒,将它们随机地砍断,使得每一节木棍的长度都不超过50个长度单位. 然后他又想把这些木棍恢复到为裁截前的状态,但忘记了初始时有多少木棒以及木棒的初始长度. 请你设计一个程序,帮助乔 ...

  2. 第三章 HTTP报文中的HTTP信息

    第三章 HTTP报文中的HTTP信息 HTTP通信过程:客户端—>服务端,服务端—>客户端. 1.HTTP报文 使用HTTP协议交互的信息被称为HTTP报文,包括请求报文和响应报文. [请 ...

  3. 新工具解决消息丢失的bug

    最近在调查一个消息丢失的bug,所幸客户的文本文件里有丢失的记录,但在localdb文件里找不到. 我当时的想法是,在运行report的时候把丢失的记录从文本文件找出来,然后添加到localdb里,最 ...

  4. Javascript是如何工作的?

    作为一个前端开发者或者全栈开发者,一定非常熟练Javascript.程序员社区Stack Overflow的调查结果显示,Javascript是最常用的编程语言,连续多年排在第一名.发明Javascr ...

  5. 推荐一款好用到爆的开源 Java 诊断工具

    Arthas是什么鬼?Arthas是一款阿里巴巴开源的 Java 线上诊断工具,功能非常强大,可以解决很多线上不方便解决的问题. Arthas诊断使用的是命令行交互模式,支持JDK6+,Linux.M ...

  6. EF Core 3.0 Preview 9 的2个小坑

    之前我们的数据库服务器使用的是 SQL Server 2008 R2 ,由于从 EF Core 3.0 Preview 6 开始不支持 UseRowNumberForPaging ,只能停留在 EF ...

  7. Linux 学习记录一(安装、基本文件操作).

    Linux 名字的由来,是当时作者将初版的 Linux 发布在网上,供别人下载完善,而那个核心文件夹就叫 Linux,就这么叫着了.而为什么 Linux 的吉祥物是一只企鹅呢?是因为当时大家要发行稳定 ...

  8. 轻量级监控平台之java进程监控脚本

    轻量级监控平台之java进程监控脚本 #!/bin/bash #进程监控脚本 #功能需求: 上报机器Java进程的进程ID,对应的端口号service tcp端口号,tomcat http 端口号,以 ...

  9. Python - __name__=='__main__'是干啥的,以及python -m与python的区别

    1. __name__=='__main__'是干啥的 先看例子,准备a.py和b.py放在同一个文件夹中 vi a.py # coding: utf-8 print("i am just ...

  10. Flask 教程 第一章:Hello, World!

    本文翻译自The Flask Mega-Tutorial Part I: Hello, World! 一趟愉快的学习之旅即将开始,跟随它你将学会用Python和Flask来创建Web应用.上面的视频包 ...