1. 父组件调用子组件的时候传入数据

<app-header [msg]="msg"></app-header>

2. 子组件引入 Input 模块

import { Component, OnInit ,Input } from '@angular/core';

3. 子组件中 @Input 接收父组件传过来的数据

export class HeaderComponent implements OnInit {
@Input() msg:string
constructor() { }
ngOnInit() {
}
}

4. 子组件中使用父组件的数据

h2>这是头部组件--{{msg}}</h2>

注意:不要在app跟组件里演示,会报错


angular中父组件给子组件传值-@input的更多相关文章

  1. artdialog4.1.7 中父页面给子页面传值

    artdialog4.1.7中父页面给子页面传值时看了一些网友的解决方法: 在父页面声明全局变量 var returnValue=“ ”,子页面用art.dialog.opener.returnVal ...

  2. layer.open中父页面向子页面传值

    1.咱先看图说话 父list.jsp 子operate.jsp实现的代码1 在父页面上完成对子页面的数据渲染 function setData(data) { var lay=layer.open({ ...

  3. vue中父级与子组件生命周期的先后顺序

    1.vue的生命周期 2.views/createrCustormer.vue为父级     <template>     <expressService />   </ ...

  4. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  5. Vue中的父组件给子组件传值

    父子组件传值: 父组件在调用子组件的地方,添加一个自定义的属性,属性的值就是你要传递给子组件的数据,如果值是一个变量,那么需要使用到绑定属性: 在子组件定义的地方,添加一个props选项,值为一个数组 ...

  6. VUe.js 父组件向子组件中传值及方法

    父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...

  7. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  8. Vue中,父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  9. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

随机推荐

  1. Android测试monkeyRunner

    monkeyrunner的官方文档: https://developer.android.com/studio/test/monkeyrunner monkeyrunner脚本可以执行截图操作 具体执 ...

  2. MySQL Navicat Premium 保存sql语句

    一.新建查询 二.编写sql语句并保存 1.保存到内部 1.Ctrl+s保存当前查询文件 2.下次打开可点击查询点击上次保存的查询文件名打开上次查询的文件 2.保存到外部 1.默认保存至 C:\Use ...

  3. Selenium常用API的使用java语言之12-定位一组元素

    在第(五)节我们已经学习了8种定位方法, 那8种定位方法是针对单个元素定位的, WebDriver还提供了另外8种用于定位一组元素的方法. import org.openqa.selenium.By; ...

  4. Go 语言解释器 Yaegi

    Yaegi 是一个优雅的 Go 语言解释器,可以执行 Go 脚本和插件. 特性 完整支持 Go 语言规范 用 Go 编写,只使用标准库 简单的解释器 API: New(), Eval(), Use() ...

  5. Hadoop集群分布搭建

    一.准备工作 1.最少三台虚拟机或者实体机(官网上是默认是3台),我这边是3台 s1: 10.211.55.18 s2: 10.211.55.19 s3: 10.211.55.20 2.安装JDK 3 ...

  6. Mac 升级 Python2.7 到 Python3.5

    1.去 Python 官网下载一个版本的包 https://www.python.org/downloads/mac-osx/ 2.安装之后,去  /Library/Frameworks/Python ...

  7. / WebAPP开发与小程序 / 步骤一 · 4-5 地图搜索与poi结合(2)

    / WebAPP开发与小程序 / 步骤一 · 4-5 地图搜索与poi结合(2) 在地图中搜索指定对象时,搜索结果可以显示出每个对象的图片,就差这个不会了

  8. Oracle 与 postgreSQL 事务处理区别(多版本与undo区别)

    2015年左右,因为工作需要用MongoDB.CouchBase这两种文档型数据库,时不时到这两个数据库官网上查资料.报BUG.时常可以在MongoDB官网上看到这样一些新闻,“某某企业成功将MySQ ...

  9. 节点(node)操作

    一.节点的属性 节点值页面中的所有内容,包括标签.属性.文本 nodeType,节点类型:如果是标签,则是1:如果是属性.则是2:如果是文本,则是3 nodeName,节点名字:如果是标签,则是大写的 ...

  10. 【luogu1251】餐巾计划问题--网络流建模,费用流

    题目描述 一个餐厅在相继的 N 天里,每天需用的餐巾数不尽相同.假设第 iii 天需要 ri​块餐巾( i=1,2,...,N).餐厅可以购买新的餐巾,每块餐巾的费用为 p 分;或者把旧餐巾送到快洗部 ...