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

淩亂°似流年 2023-02-21 12:29 105阅读 0赞

一、父组件给子组件传值 @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);
      }