Angular 父子組件傳值

Angular 父子組件傳值 @Input  @Output  @ViewChild

---

 　　

新建一個頭部組件 newsheader

　　

　　在主組件引用 news 組件，在news組件添加 newsheader 組件。

設置newsheader組件樣式

設置newsheader組件的內容，添加一個class屬性

<h2 class="header">這是一個頭部組件</h2>

 如果需要全局設置，則在 style.css 中設置。

如果單獨設置自己的，則在自己組件的css中設置。

此項目案例設置全局的。

/* You can add global styles to this file, and also import other style files */

.header{
    height: 44px;
    line-height: 44px;
    text-align: center;
    background-color: #000;
    color: #fff;
    text-align: center;
}

把新聞頁面的數據傳給頭組件（父組件向子組件傳值） @Input

 首先在新聞界組件定義一個數據（在父組件定義一個數據）

 在父組件中創建一個變量，用於傳遞給子組件：

 public message = "這是新聞組件的MSG"

 

這個 message 屬性屬於新聞組件（父組件），我們可以在新聞組件上打印出來。

<app-newsheader></app-newsheader>
<hr>
這是新聞組件 -----  {{message}}
<hr>
<br>

在頭部組件（子組件）中並沒有定義 message 屬性，我們在頭部（子組件）是拿不到數據的，他們數據不能共享，因此我們需要通過父組件把需要的值（message）傳給子組件。

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

<app-newsheader [msg]="message"></app-newsheader>

 

2.子組件引入 Input 模塊

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

 

3.接收父組件傳進的數據

@Input() msg:string; /**通過Input接收父組件傳進的msg */

 

4.在頭部（子組件）使用父組件傳進的數據 msg

<h2 class="header">這是一個頭部組件 -- {{msg}}</h2>

如果多個變量就添加多個HTML屬性

假如 父組件 ts 文件有兩個屬性需要傳給子組件

父組件調用子組件的HTML代碼也傳入兩個屬性

子組件在去接收父組件傳進的兩個值

子組件就可以使用了

子組件執行父組件的方法 @Input

 創建一個新的組件 home

創建一個新的組件 footer

通過 home 組件和 footer 組件來講解子組件執行父組件的方法。

在 根組件 引入 home 組件，在 home組件 引入 footer 組件。

1.在home組件（父組件）創建一個 run 方法

ts文件

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {


  public msg = "我是home組件的msg"

  constructor() { }

  ngOnInit() {
  }

  run(){
    alert('這是home組件的run方法')
  }

}

html 文件

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

<br>
<hr>
home組件<br>
<button (click)="run()">點擊執行run方法</button>

2.子組件接收父組件傳進的數據和方法

ts 文件

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

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {


  @Input() msg:string;

  @Input() run;

  constructor() { }

  ngOnInit() {
  }

}

　　

html 文件

<h2 class="header">footer子組件 -- {{msg}}</h2>
<br>
<button (click)="run()">點擊執行run方法</button>

 

 父組件接收子組件返回的數據

 在父組件創建一個方法，用於接收子組件數據

  // 接收子組件的數據
  getDataFromChild(childData){
    alert(childData)
  }

把 getDataFromChild 方法在調用子組件的時候傳給子組件

<app-footer [msg]="msg" [run]="run" [getDataFromChild]="getDataFromChild"></app-footer>

<br>
<hr>
home組件<br>
<button (click)="run()">點擊執行run方法</button>

 

子組件接收父組件傳進來的方法，並且創建方法返回給父組件數據

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

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {


  @Input() msg:string;

  @Input() run;
  @Input() getDataFromChild;

  public msginfo = '這是子組件的數據'

  constructor() { }

  ngOnInit() {
  }

  sendParent(){ //子組件自己的方法
    this.getDataFromChild(this.msginfo) //子組件調用父組件的方法
 }

}

給子組件添加一個按鈕給父組件傳數據

<h2 class="header">footer子組件 -- {{msg}}</h2>
<br>
<button (click)="run()">點擊執行run方法</button>
<button (click)="sendParent()">點擊，給父組件傳值</button>

 

子組件用 @Output 的方法執行父組件方法

使用最開始的 news 組件 和 newsheader 組件。

 子組件引入 Output 和 EventEmitter

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

 

子組件中實例化 EventEmitter

@Output() private outer=new EventEmitter<string>();

 /*用 EventEmitter 和 output 裝飾器配合使用 <string>指定類型變量*/

 

子組件通過 EventEmitter 對象 outer 實例廣播數據

sendParent(){
 // alert('zhixing');
 this.outer.emit('msg from child')
 }

 

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

<app-header (outer)="runParent($event)"></app-header>

 

父組件接收到數據會調用自己的 runParent 方法，這個時候就能拿到子組件的數據

//接收子組件傳遞過來的數據
 runParent(msg:string){
 alert(msg);
 }

 

父組件主動獲取子組件的屬性和方法

 定義 footer 組件

export class FooterComponent implements OnInit {
 public msg:string;
 constructor() {

 }
 ngOnInit() {
 }
 footerRun(){
 alert('這是 footer 子組件的 Run 方法');
 }
}

 

父組件調用子組件的時候給子組件起個名字

<app-footer #footer></app-footer>

 

直接獲取執行子組件的方法

<button (click)='footer.footerRun()'>獲取子組件的數據</button>

父組件通過局部變量獲取子組件的引用,通過 ViewChild 主動獲取子組件的數據和方法

調用子組件給子組件定義一個名稱

<app-footer #footerChild></app-footer>

 引入 ViewChild

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

 ViewChild 和剛才的子組件關聯起來

@ViewChild('footerChild') footer;

 調用子組件

run(){

 this.footer.footerRun();

 }