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() transData

1.1 父组件hero-parent

hero-parent.component.html

<p>这是父组件</p><app-hero-child [transData]='tran_childData'></app-hero-child>

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 {}}

hero-child.component.html

<p>{{transData}}</p>

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)    }}

2. 子组件给父组件传递参数

• 说明：子组件给父组件传递参数的时候需要导入Output和EventEmitter，引入模块import { Component, OnInit, Output, EventEmitter} from '@angular/core'

• 使用的时候需要先暴露一个方法@Output() childEvent = new EventEmitter()用来使用emit传递数据

• 具体使用this.childEvent.emit('我是子组件传递的数据')

2.1 子组件hero-child

1. hero-child.component.html

   <button (click)='transData_to_parent()'>我是子组件，给父组件传递参数</button>

2. 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

hero-parent.component.html

<p>这是父组件</p><p>{{receiceData}}</p><app-hero-child (childEvent)='receive_child_data($event)'></app-hero-child>

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父子组件间怎么传值”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！