本篇文章给大家介绍一下angular中父子组件间传值的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
相关推荐：《angular教程》
官方地址：https://angular.cn/guide/component-interaction#component-interaction
1. 父组件给子组件传值
说明： 父组件给子组件传值的时候，父组件中在子组件的选择器上绑定数据即可子组件接收的时候需要引入input模块import { Component, OnInit, Input} from ‘@angular/core’子组件还需要使用语法糖的形式接收父组件传递的参数@input() transData
1.1 父组件hero-parent
1、hero-parent.component.html
这是父组件
登录后复制
2、hero-parent.component.ts
import { Component, OnInit } from '@angular/core'@Component({ selector: 'app-hero-parent', templateUrl: './app-hero-parent.component.html', styleUrls: ['./app-hero-parent.component.scss']})export class HeroesComponent implements OnInit { tran_childData:string = '这是父组件传递给子组件的数据' constructor() {} ngOnInit(): void {}}
登录后复制
1.2 子组件hero-child
1、hero-child.component.html
{{transData}}
登录后复制
2、hero-child.component.ts
import { Component, OnInit, Input} from '@angular/core'@Component({ selector: 'app-hero-child', templateUrl: './app-hero-child.component.html', styleUrls: ['./app-hero-child.component.scss']})export class DetailComponent implements OnInit { @Input() transData: string constructor() {} ngOnInit(): void { console.log(this.transData) }}
登录后复制
1.3 效果图
2. 子组件给父组件传递参数
说明：子组件给父组件传递参数的时候需要导入Output和EventEmitter，引入模块import { Component, OnInit, Output, EventEmitter} from ‘@angular/core’使用的时候需要先暴露一个方法@Output() childEvent = new EventEmitter()用来使用emit传递数据具体使用this.childEvent.emit(‘我是子组件传递的数据’)
2.1 子组件hero-child
hero-child.component.html
登录后复制hero-child.component.ts
import { Component, OnInit, Output, EventEmitter} from '@angular/core'@Component({ selector: 'app-hero-child', templateUrl: './app-hero-child.component.html', styleUrls: ['./app-hero-child.component.scss']})export class DetailComponent implements OnInit { @Output() childEvent = new EventEmitter() constructor() {} ngOnInit(): void {}, // 给父组件传递参数 transData_to_parent() { this.childEvent.emit('我是子组件传递的数据') }}
登录后复制
2.2 父组件hero-parent
1、hero-parent.component.html
这是父组件
{{receiceData}}
登录后复制
2、hero-parent.component.ts
import { Component, OnInit } from '@angular/core'@Component({ selector: 'app-hero-parent', templateUrl: './app-hero-parent.component.html', styleUrls: ['./app-hero-parent.component.scss']})export class HeroesComponent implements OnInit { constructor() {} ngOnInit(): void {} receiceData:string // 接收子组件传递的数据 receive_child_data(data) { this.receiceData = data }}
登录后复制
2.3 效果图
更多编程相关知识，请访问：编程视频！！
以上就是详解Angular父子组件间如何传值？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2716815.html
