這篇文章將為大家詳細(xì)講解有關(guān)Angular中父子組件相互傳參的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是少有的成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、營銷型企業(yè)網(wǎng)站、小程序定制開發(fā)、手機APP,開發(fā)、制作、設(shè)計、友情鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,從2013年開始,堅持透明化,價格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評

一 ：父組件獲取子組件的數(shù)據(jù)和方法

也就是說 子組件給父組件傳數(shù)據(jù)和方法

通過ViewChild

演示例子：

父組件：news

子組件：header

假如子組件header有個run方法

run(){
 console.log(‘我是header里面的run方法’);
 }

在父組件調(diào)用子組件header的run方法

1、在父組件中調(diào)用子組件，并給子組件定義一個名稱

<app-header #header></app-header>

2、在父組件引入ViewChild

import { Component,OnInit ,ViewChild} from ‘@angular/core’;

3、利用屬性裝飾器ViewChild 和剛才的子組件關(guān)聯(lián)起來

@ViewChild(‘header’)
Header:any;

4、調(diào)用子組件的方法

getChildRun(){
this.Header.run();
}

二：父組件給子組件傳值-@input

演示例子：
父組件：home
子組件：header

父組件不僅可以給子組件傳遞簡單的數(shù)據(jù)，還可把自己的方法以及整個父組件傳給子組件

所以在子組件中可以調(diào)用 父組件的方法

1、父組件調(diào)用子組件的時候傳入數(shù)據(jù)

<app-header [title]="title" [homeWork]="homeWork"  [homepage]='this'></app-header>

2、子組件引入 Input 模塊

import { Component, OnInit ,Input } from ‘@angular/core’;

3、子組件中 @Input 接收父組件傳過來的數(shù)據(jù)

export class HeaderComponent implements OnInit {
    @Input()  title:string

    constructor() { }
    ngOnInit() {}
}

4、子組件中使用父組件的數(shù)據(jù)

這是頭部組件-- {

undefined

{title}}

5、子組件中使用父組件的方法

總結(jié)：

父傳子： @input

子傳父：ViewChild

三、子組件通過@Output觸發(fā)父組件的方法

演示例子：
父組件：news
子組件：footer

1、子組件引入 Output 和 EventEmitter

import { Component, OnInit ,Input,Output,EventEmitter} from ‘@angular/core’;

2、子組件中實例化 EventEmitter

@Output()
 private outer=new EventEmitter();
 /用 EventEmitter 和 output 裝飾器配合使用 指定類型變量/

3、子組件通過 EventEmitter 對象 outer 實例廣播數(shù)據(jù)

sendParent(){
 this.outer.emit(‘msg from child’)
 }

4、父組件調(diào)用子組件的時候，定義接收事件 ,outer 就是子組件的 EventEmitter 對象 outer

文件：components\news\news.component.html

<app-footer (outer)=“getFooterRun(data)”>

5、父組件接收到數(shù)據(jù)會調(diào)用自己的 getFooterRun 方法，這個時候就能拿到子組件的數(shù)
文件：components\news\news.component.ts

//接收子組件傳遞過來的數(shù)據(jù)
 getFooterRun(data){
 console.log(data);
 }

五、非父子組件通訊

1、公共的服務(wù)
2、Localstorage(推薦)
3、Cookie

總結(jié)：

vue中 關(guān)于$emit的用法

1、父組件可以使用屬性把數(shù)據(jù)傳給子組件，子組件通過props接受。
2、子組件可以使用 $emit 觸發(fā)父組件的自定義事件。

vm.$emit( event, arg ) //觸發(fā)當(dāng)前實例上的事件
vm.$on( event, fn );//監(jiān)聽event事件后運行 fn；

angular中 關(guān)于emit的用法

1、父組件可以使用屬性把數(shù)據(jù)傳給子組件,子組件通過@input接受。
2、子組件可以使用 Output 和 EventEmitter 觸發(fā)父組件的自定義事件。

父組件

<app-footer (event)=“getFooterRun(data)”>

子組件

@Output() 
private event=new EventEmitter<string>();
/*用 EventEmitter 和 output 裝飾器配合使用 <string>指定類型變量*/

sendParent(){ 
    // outer 相當(dāng)于是事件名稱
    this.event.emit(data)  
 }

<button (event)=“sendParent()”>通過@Output給父組件廣播數(shù)據(jù)

關(guān)于“Angular中父子組件相互傳參的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

標(biāo)題名稱：Angular中父子組件相互傳參的方法
本文地址：http://sd-ha.com/article32/gcjspc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、軟件開發(fā)、域名注冊、響應(yīng)式網(wǎng)站、服務(wù)器托管、定制開發(fā)

廣告

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