Angular中父子組件之間父組件給子組件傳值、傳遞方法、傳遞自己

場景

Angular介紹、安裝Angular Cli、創建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項目。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

新建兩個組件，父組件parent和子組件child

ng g component components/child

ng g component components/parent

 

 

父組件給子組件傳遞簡單的數據

首先在父組件parent中的ts中聲明一個簡單的字符串變量

public msg:string = "你媽叫你回家吃飯";

然后在父組件的html中調用子組件的時候傳入數據

<app-child [msg]="msg"></app-child>

左邊是傳遞的標識變量，右邊是父組件的數據變量

然后在子組件的ts中引入input模塊

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

然后在子組件的ts中使用@Input接收父組件傳過來的數據

@Input() msg:string

這里的msg要與上面父組件傳遞的左邊的msg相對應

然后就可以在子組件的html中使用接收的數據

<h2>{{msg}}</h2>

運行項目看效果

 

 

 

父組件傳遞方法給子組件(子組件調用父組件的方法)

同上面父組件傳遞簡單的數據給子組件一樣，還可以將 父組件的方法傳遞給子組件

首先在子組件中聲明一個run方法

  run()
  {
    alert("調用了父組件的run方法");
  }

然后在父組件調用子組件時傳遞方法

<app-child [msg]="msg" [run] ="run"></app-child>

同樣在子組件中引入input

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

然后在子組件中接收方法

@Input() run:any

在子組件的html中添加一個button

<button (click) = "getParentRun()">調用父組件的方法</button>

並給button添加一個點擊事件，在此點擊事件中調用接收的run方法

  getParentRun()
  {
    this.run();
  }

運行看效果

 

 

 

父組件將自己傳遞給子組件

跟上面將父組件的方法傳遞給子組件一樣，還可以將父組件整個傳遞給子組件

只需要在父組件調用子組件時傳遞下this

<app-child [msg]="msg" [run] ="run" [baba]="this"></app-child>

然后在子組件中接收this

@Input() baba:any

就可以直接調用父組件的屬性和方法了

  getParentRun()
  {
    //this.run();
    this.baba.run();
    alert(this.baba.msg);
  }