Angular中父子組件相互傳參的方法

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

一 ：父組件獲取子組件的數據和方法

也就是說 子組件給父組件傳數據和方法

通過ViewChild

演示例子：

父組件：news

子組件：header

假如子組件header有個run方法

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

在父組件調用子組件header的run方法

1、在父組件中調用子組件，并給子組件定義一個名稱

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

2、在父組件引入ViewChild

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

3、利用屬性裝飾器ViewChild 和剛才的子組件關聯起來

@ViewChild(‘header’)
Header:any;

4、調用子組件的方法

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

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

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

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

所以在子組件中可以調用 父組件的方法

1、父組件調用子組件的時候傳入數據

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

2、子組件引入 Input 模塊

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

3、子組件中 @Input 接收父組件傳過來的數據

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

    constructor() { }
    ngOnInit() {}
}

4、子組件中使用父組件的數據

這是頭部組件-- {

undefined

{title}}

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

總結：

父傳子： @input

子傳父：ViewChild

三、子組件通過@Output觸發父組件的方法

演示例子：
父組件：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 實例廣播數據

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

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

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

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

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

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

五、非父子組件通訊

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

總結：

vue中 關于$emit的用法

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

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

angular中 關于emit的用法

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

父組件

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

子組件

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

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

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

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