父组件中定义:  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. LeetCode 5129. 下降路径最小和 II Minimum Falling Path Sum II

    地址 https://leetcode-cn.com/contest/biweekly-contest-15/problems/minimum-falling-path-sum-ii/ 题目描述给你一 ...

  2. Spring Cloud 如何搭建eureka

    Eureka Server 的搭建 eureka 是 Spring Cloud 的注册中心,提供服务注册和服务发现的功能. 利用idea 快速创建一个eureka应用File - NewProject ...

  3. webdriver浏览器版本驱动对应以及下载

    对于webdriver和各个浏览器的版本的对应,我最近发现浏览器驱动的对应在selenium库的源码里都有提及,路径是:python>site-packages>selenium>w ...

  4. Windows下同时安装python2和python3如何兼容版本

    引言:因学习需要把python2和python3都安装了,为了避免使用过程中混淆版本在网上找了一些解决方案,亲测可用.方法如下: 分别下载并安装Python2.x和Python3.x. 配置环境变量. ...

  5. 使用Runtime的objc_copyClassNamesForImage和objc_getClassList获取类

    一.介绍 objc_copyClassNamesForImage:拷贝动态库类列表,也即当前工程下自己创建的所有类 objc_getClassList:获取所有类列表,也即当前工程下所有类(含系统类. ...

  6. Spring 中AOP及前后置增强案例

    1.AOP面向切面编程 面向切面编程的本质:面向切面编程,指扩展功能不修改源代码,将功能代码从业务逻辑代码中分离出来.  1主要功能:日志记录,性能统计,安全控制,事务处理,异常处理等等.  2主要意 ...

  7. Python的定时器与线程池

    定时器执行循环任务: 知识储备 Timer(interval, function, args=None, kwargs=None) interval ===> 时间间隔 单位为s functio ...

  8. pixijs shader 实现图片波浪效果

    const app = new PIXI.Application({ transparent: true }); document.body.appendChild(app.view); // Cre ...

  9. JeeSite | 保存信息修改记录续

    遗留问题 上篇文章中遗留了一个问题,就是为了要关联类属性与注释,注释与字典的地方使用了两个map来逐个添加了相关的信息,如下所示: Map<String, String> mapField ...

  10. 分析一个简单的WPF程序

    1.新建WPF项目 使用Visual Studio 代码编辑器点击新建项目,选择 WPF应用后点击下一步: 在新窗口中我们填写项目名称.选择项目位置后点击创建就完成了WPF项目的创建. 2.WPF项目 ...