本篇文章给大家介绍一下angular中父子组件间传值的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
相关推荐：《angular教程》
angular中父子组件传值
官方地址：https://angular.cn/guide/component-interaction#component-interaction
1. 父组件给子组件传值
说明： 父组件给子组件传值的时候，父组件中在子组件的选择器上绑定数据即可<app-hero-child [transdata]='tran_childdata'></app-hero-child>子组件接收的时候需要引入input模块import { component, oninit, input} from '@angular/core'子组件还需要使用语法糖的形式接收父组件传递的参数@input() transdata1.1 父组件hero-parent
1、hero-parent.component.html
<p>这是父组件</p><app-hero-child [transdata]='tran_childdata'></app-hero-child>
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-child1、hero-child.component.html
<p>{{transdata}}</p>
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<button (click)='transdata_to_parent()'>我是子组件，给父组件传递参数</button>
hero-child.component.tsimport { 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
<p>这是父组件</p><p>{{receicedata}}</p><app-hero-child (childevent)='receive_child_data($event)'></app-hero-child>
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父子组件间如何传值？的详细内容。