欢迎加入前端交流群交流知识获取视频资料:

父组件向子组件传值   @Input

文件目录

父组件:

father.template.html

<h1>父组件</h1>
<cmt-child [data]='data'></cmt-child>

father.component.ts

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

@Component({
selector: 'cmt-father',
templateUrl: './father.template.html'
})
export class FatherComponent implements OnInit {
data: any = '我是传往子组件的值'
ngOnInit() {
} ngOnChanges() {
} }

子组件:(使用@Input修饰器去接收)

childcomponent.ts

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

@Component({
selector: 'cmt-child',
templateUrl: './child.template.html'
})
export class ChildComponent implements OnInit {
@Input() data: any;//接收父组件的值
ngOnInit() {
console.log(this.data)
} ngOnChanges() {
console.log(this.data)
} }

这样就把值从父组件传到了子组件!

子组件向父组件传值(子组件通过方法借助修饰器@output传值给父组件)

子组件

childcomponent.ts

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

@Component({
selector: 'cmt-child',
templateUrl: './child.template.html'
})
export class ChildComponent implements OnInit {
@Output('checked') checkedBack = new EventEmitter<any>();
id:any ="我是传给父组件的值"
ngOnInit() {
} ngOnChanges() {
}
checkedCallback() {
this.checkedBack.emit(this.id);
}
}

child.template.html.html

<h1>子组件</h1>
<button (click)='checkedCallback()'>点击传值给父组件</button>

父组件

father.template.html

<h1>父组件</h1>
<cmt-child (checked)="checkedBack($event)"></cmt-child>

father.component.ts

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

@Component({
selector: 'cmt-father',
templateUrl: './father.template.html'
})
export class FatherComponent implements OnInit {
ngOnInit() {
} ngOnChanges() {
} checkedBack(event) {
console.log(event)
}
}

这样子组件通过点击就把值传递给了父组件!

angular4父组件向子组件传值,子组件向父组件传值的方法的更多相关文章

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

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

  2. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

    Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

  3. $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数

    很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.    找到了两种方法可以同时添加自定义参数的方法. 方法一:子组件传出单个参数时 ...

  4. vue父组件异步传递prop到子组件echarts画图问题踩坑总结

    效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...

  5. 误区以为父组件render一次,子组件会重新初始化

    初学react的时候我有一个误区,以为父组件render的一次,会将子组件先卸载,再将子组件重新初始化,事实证明不是. 这是对react生命周期函数不太清楚. 父子组件都初始化后,父组件再render ...

  6. 【VUE】7.组件通信(二)子组件修改父组件

    1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...

  7. vue3常见问题及解决方案(四)父组件切换行,然后子组件切换tab,子组件内的数据不刷新

    问题描述 父组件切换行,然后子组件切换tab,子组件内的数据不刷新. 例如父组件为订单,子组件为订单相关商品和相关客户,商品和客户使用tab选项卡组织. 当tab显示商品页时,切换订单,商品页内容跟着 ...

  8. 【Vue项目笔记】—— 父子组件之间传递参数和子组件执行父组件中的方法

    父组件(MyBlog.vue) <template> <!-- Delete Modal --> <!-- 注意:这里的@deleteBlog中的deleteBlog要和 ...

  9. 十、React 父组件传来值的类型控制propTypes、父组件如果不传值defaultProps

    父组件给子组件传值时: 1.defaultProps:父子组件传值中,如果父组件调用子组件的时候不给子组件传值,可以在子组件中使用defaultProps定义的默认值: 2.propTypes:验证父 ...

  10. Vue父子组件数据双向绑定,子组件可修改props

    第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...

随机推荐

  1. 初探.net framework 下的异步多线程

    初探.net framework 下的异步多线程 目录 1.多线程的出现条件 2.Thread和ThreadPool的相关Api及用法 3.Task和Parallel的相关Api及用法 4.Async ...

  2. C-数据和C

    1.常量与变量数据 有些数据在程序使用之前预先设定,并在整个运行过程中没有变化,叫做常量.另外的数据在程序运行过程中可能变化或被赋值,叫做变量. 2.数据类型关键字 对于变量,编译器通过声明语句中指定 ...

  3. jquery自动完成插件的使用

    .ui-autocomplete { z-index: !important; max-height: 100px; overflow-y: auto; /* 防止水平滚动条 */ overflow- ...

  4. 第6章 服务模式 Service Interface(服务接口)

    Service Interface(服务接口) 上下文 您正在设计企业应用程序,并且需要能够通过网络使用其部分功能.此功能需要能够被各类系统使用,因此互操作性是设计的重要方面.除互操作性之外,可能还需 ...

  5. Monad 系列

    本系列是在学习Monad时在网上找到的一个老外的博客,作者是MikeHadlow,地址是mikehadlow.blogspot.com,  可惜国内访问不了.这个系列对Monad讲解的浅显易懂,而且有 ...

  6. Domain=NSOSStatusErrorDomain Code=1937337955 关于iOS录音AVAudioRecorder与音频播放AVAudioPlayer真机调试录音不能播放的问题

    error:Domain=NSOSStatusErrorDomain Code=1937337955 ,这个错误很常见, 原因是因为我们需要调用另外一个AVAudioPlayer 的初始化方法,来确定 ...

  7. 转载:SQL Server中查询CPU占用高的SQL语句

    SQL Server中查询CPU占用高的SQL语句 SQL Server 表变量的用法 究竟什么是敏捷测试--朱少民

  8. JS 实现类似打印的效果(一个字一个字显示)

    <pre id="aa"></pre> <div style="display:none" id="w"> ...

  9. MySQL数据表查询操

    准语法结构:编写DQL时一定要严格按照此语法的顺序来实现!/* SELECT [ALL | DISTINCT] ALL表示查询出所有的内容 DISTINCT 去重 {* | 表名.* | 表名.字段名 ...

  10. Linux 命令查询系统负载信息

    linux uptime命令主要用于获取主机运行时间和查询linux系统负载等信息.uptime命令过去只显示系统运行多久.现在,可以显示系统已经运行了多长 时间,信息显示依次为:现在时间.系统已经运 ...