小編給大家分享一下Angular父子組件間怎么傳值，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

分宜ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

Angular中父子組件傳值

官方地址：https://angular.cn/guide/component-interaction#component-interaction

1. 父組件給子組件傳值

• 說明： 父組件給子組件傳值的時候，父組件中在子組件的選擇器上綁定數(shù)據(jù)即可

• 子組件接收的時候需要引入input模塊import { Component, OnInit, Input} from '@angular/core'

• 子組件還需要使用語法糖的形式接收父組件傳遞的參數(shù)@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 = '這是父組件傳遞給子組件的數(shù)據(jù)'
    constructor() {}
    ngOnInit(): void {}
}

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

2. 子組件給父組件傳遞參數(shù)

• 說明：子組件給父組件傳遞參數(shù)的時候需要導(dǎo)入Output和EventEmitter，引入模塊import { Component, OnInit, Output, EventEmitter} from '@angular/core'

• 使用的時候需要先暴露一個方法@Output() childEvent = new EventEmitter()用來使用emit傳遞數(shù)據(jù)

• 具體使用this.childEvent.emit('我是子組件傳遞的數(shù)據(jù)')

2.1 子組件hero-child

1. hero-child.component.html

   我是子組件，給父組件傳遞參數(shù)

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 {},
       // 給父組件傳遞參數(shù)
       transData_to_parent() {
           this.childEvent.emit('我是子組件傳遞的數(shù)據(jù)')
       }
   }

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
    // 接收子組件傳遞的數(shù)據(jù)
    receive_child_data(data) {
        this.receiceData = data
    }
}

2.3 效果圖

以上是“Angular父子組件間怎么傳值”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！