父组件中定义:  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. Day4- Python基础4 深浅拷贝、三目运算、列表生成式,迭代器&生成器、装饰器

    本节内容: 1.深浅拷贝 2.三目运算 3.迭代器和生成器 4.装饰器 1.深浅拷贝 拷贝意味着对数据重新复制一份,深浅拷贝的含义就是:对于修改复制的数据是否会影响到源数据,拷贝操作对于基本数据结构需 ...

  2. JMeter基础知识系列三

    JMeter测试结果字段的意义: Label:定义HTTP请求名称. Samples:表示这次测试中一共发出了多少个请求. Average:平均响应时长,当使用了Transaction Control ...

  3. LeetCode解题笔记 - 1. Two Sum

    1. Two Sum Given an array of integers, return indices of the two numbers such that they add up to a ...

  4. eclipse中的clean操作

    在eclipse中写JavaWeb项目时,有时候会出现代码修改了,但是执行的效果还是修改之前的,这时候clean一下就会解决问题 1.clean操作 Project---->clean---&g ...

  5. Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) B. Box 贪心

    B. Box Permutation p is a sequence of integers p=[p1,p2,-,pn], consisting of n distinct (unique) pos ...

  6. 2019csp-s

    11.17一切尘埃落定 回来之后一直“沉迷”文化课,不想去面对自己,更多的可能是不敢吧 晃晃悠悠一个星期过去了 其实信息学考完就知道成绩了,很垃圾,不想去想,所以沉迷解析几何无法自拔(但好像也做不对几 ...

  7. Luogu P3600 随机数生成器

    Luogu P3600 随机数生成器 题目描述 sol研发了一个神奇的随机数系统,可以自动按照环境噪音生成真·随机数. 现在sol打算生成\(n\)个\([1,x]\)的整数\(a_1...a_n\) ...

  8. IT兄弟连 HTML5教程 HTML5和JavaScript的关系

    JavaScript可是实现HTML5重要语言.长久以来,JavaScript一直都是在HTML中实现动态效果的不二之选,而JavaScript在一些程序员眼里都是编程语言中的二等公民.早先,它经常是 ...

  9. 划词标注1——使用svg绘制换行文本并自动识别库中字典数据

    业务需求 给出一段文本,自动识别出文本中包含的关键字信息,关键字是库里已知的数据,根据类型的不同显示出不同的颜色 业务分析 1)采用css:文本识别出来后,根据识别出的文本更改对应文本的dom,通过更 ...

  10. java线程join方法使用方法简介

    本博客简介介绍一下java线程的join方法,join方法是实现线程同步,可以将原本并行执行的多线程方法变成串行执行的 如图所示代码,是并行执行的 public class ThreadTest { ...