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

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

Angular中父子組件傳值

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

1. 父組件給子組件傳值

• 說(shuō)明： 父組件給子組件傳值的時(shí)候，父組件中在子組件的選擇器上綁定數(shù)據(jù)即可<app-hero-child [transData]='tran_childData'></app-hero-child>

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

• 子組件還需要使用語(yǔ)法糖的形式接收父組件傳遞的參數(shù)@input() transData

1.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 = '這是父組件傳遞給子組件的數(shù)據(jù)'
    constructor() {}
    ngOnInit(): void {}
}

1.2 子組件hero-child

1、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. 子組件給父組件傳遞參數(shù)

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

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

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

2.1 子組件hero-child

1. hero-child.component.html

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

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

2.3 效果圖

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

網(wǎng)頁(yè)標(biāo)題：Angular父子組件間怎么傳值
鏈接地址：http://www.yijiale78.com/article32/ihojsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)公司、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、微信公眾號(hào)、手機(jī)網(wǎng)站建設(shè)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)