Angular6学习笔记（七）父子组件通信

一、父组件给子组件传值 @Input

父组件给子组件不仅可以传递简单的数据，还可以把父组件的方法以及整个父组件传递给子组件。

 

1、父组件调用子组件的时候传入数据

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

2、子组件引入Input模块

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

3、子组件中@Input接收父组件传递过来的值

export class HeaderComponent implements OnInit {

  @Input()
  title = '';
  constructor() { }

  ngOnInit() {
  }

}

4、在子组件中展现title值

<h1>{{title}}</h1>

二、父组件给子组件传方法（即子组件调用父组件的方法）

1、同传数据一样，在父组件模板文件调用子组件时，定义属性

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

2、在父组件的ts文件中定义父组件的方法run

  run() {
    alert('我是父组件的run方法');
  }

3、同理在子组件的ts文件中@Input 引入run输入属性，并定义调用方法

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

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

  @Input()
  title = '';
  @Input() run;
  constructor() { }

  ngOnInit() {
  }
  getParentFun() {
     // 执行父组件中的run方法
    this.run();
  }


}

4、子组件模板文件

<p>{{title}}</p>
<button (click)="getParentFun();">子组件执行父组件的run方法</button>
<br>
<br>
<br>
<br>

三、将父组件整个传给子组件

明白了一、二步，这个就很容易理解，在父组件中调用子组件传递属性时，属性值直接传递this即可。

<app-header [parent]="this"></app-header>

其它步骤就和调用数据和方法的调用方式相同了，这样子组件中的parent属性就代表了父组件实例了，然后随便咋玩。

 

四、父组件通过@ViewChild主动获取子组件的数据和方法

 

1、定义子组件的属性及方法：

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

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

  constructor() { }

  public msg = '我是子组件的msg';

  ngOnInit() {
  }

  run() {
    alert('我是子组件的run方法');
  }

}

2、父组件模板文件中调用子组件，并设置其id

<hr>
<p>
  我是一个新闻组件
</p>
<hr>
<button (click)="getChildMsg();">获取子组件的msg</button>
<br>
<br>
<button (click)="getChildRun();">执行子组件的run方法</button>

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

3、父组件的控制类中通过@ViewChild 引入子组件对象

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

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

  constructor() { }

  @ViewChild('footer') footerEl: any; // 获取子组件

  ngOnInit() {
  }

  // 获取子组件的属性
  getChildMsg() {
    alert(this.footerEl.msg);
  }
  // 执行子组件的方法
  getChildRun() {
     this.footerEl.run();
  }

}

四、子组件通过@Output触发父组件的方法

1、子组件中引入Output和EventEmiter

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

2、子组件中实例化EventEmiter

@Output() private outer = new EventEmitter();

 

3、子组件通过EventEmiter 对象outer实例广播数据

  callParentFun() {
    const object: any = new Object();
    object.aa = 'aa';
    object.bb = 'bb';
    this.outer.emit(object);
  }

4、父组件调用子组件的时候，定义接收事件 outer就是子组件的EventEmiter对象outer

<app-footer #footer (outer)="formChild($event);"></app-footer>

5、父组件接收到数据会调用自己的formChild方法，这个时候父组件就能拿到子组件的数据

  formChild(e) {
    console.log(e);
    alert(e.aa);
  }