angular  父子元件傳值@Input @Output @ViewChild

中文官網

一、 父元件給子元件傳值 [email protected]t

 1. 父元件調用子元件的時候傳入資料

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

2. 子元件引入 Input 子產品

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

3. 子元件中 @Input 接收父元件傳過來的資料

export class HeaderComponent implements OnInit {
 
 @Input() msg:string
 constructor() { }
 ngOnInit() {
 }
}
           

4. 子元件中使用父元件的資料

<h2>這是頭部元件--{{msg}}</h2>
           

二、 父子元件傳值的方式讓子元件執行父元件的方法

1. 父元件定義方法

run(){
 alert('這是父元件的 run 方法');
}
           

2．調用子元件傳入目前方法

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

3. 子元件接收父元件傳過來的方法

import { Component, OnInit ,Input } from '@angular/core';
@Input() run:any;
export class HeaderComponent implements OnInit {
 
 @Input() msg:string
@Input() run:any;
 constructor() { }
}
           

4. 子元件使用父元件的方法。

export class HeaderComponent implements OnInit {
 
 @Input() msg:string;
 @Input() run:any;
 constructor() { }
 ngOnInit() {
 this.run(); /*子元件調用父元件的 run 方法*/
 }
           

三、 子元件通過@Output 執行父元件的方法

1. 子元件引入 Output 和 EventEmitter

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

2.子元件中執行個體化 EventEmitter

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

3. 子元件通過 EventEmitter 對象 outer 執行個體廣播資料

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

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

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

5.父元件接收到資料會調用自己的 runParent 方法，這個時候就能拿到子元件的資料

//接收子元件傳遞過來的資料
 runParent(msg:string){
 alert(msg); 
 }
           

四、 父元件通過局部變量擷取子元件的引

用 ，主動擷取子元件的資料和方法

1. 定義 footer 元件

export class FooterComponent implements OnInit {
 public msg:string;
 constructor() { 
 
 }
 ngOnInit() {
 }
 footerRun(){
 alert('這是 footer 子元件的 Run 方法');
 }
}
           

2. 父元件調用子元件的時候給子元件起個名字

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

3. 直接擷取執行子元件的方法

<button (click)='footer.footerRun()'>擷取子元件的資料</button>
           

五、 父元件通過局部變量擷取子元件的引用,通過 ViewChild 主動擷取子元件的資料和方法

1.調用子元件給子元件定義一個名稱

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

2. 引入 ViewChild

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

3. ViewChild 和剛才的子元件關聯起來

 @ViewChild('footerChild') footer;
           

4.調用子元件

 run(){
 
 this.footer.footerRun();
 }