angular6之父子组件通信

父组件向子组件传入数据

例如将父组件的user对象传入子组件additem中

<app-additem [user]=”user" #additem></app-additem>

1、将父组件的user对象传入子组件additem中，组件模板中绑定属性[user]

2、子组件中类中先导入user对象，之后就可以在组件中直接使用该对象

@Input () user;

父组件访问子组件的方法和数据

方法一：

<button (click)="additem.add()" nz-button type="primary">添加</button>

<app-addItem [user]=“user #additem></app-addItem>

通过在子组件标签上加上属性#<name>，那么在组件模板中就可以直接通过该名称调用子组件里的方法和属性。但是这种写法有局限性，只能在html模板中使用，父组件本身的ts代码中并不能使用

方法二：

父组件ts代码中调用子组件的方法和属性。

首先导入模块ViewChild。

import {ViewChild } from '@angular/core';

在父组件的类中将子组件作为viewChild注入到父组件中

@ViewChild(AdditemComponent)

private additem: AdditemComponent

在父组件的方法中就可以通过this.additem[方法/属性名]来调用子组件的方法或属性数据

子组件调用父组件的方法

子组件导出 EventEmitter 属性，通过emits方法，触发父组件中绑定的该属性的事件。

具体用法：

子组件中引入EventEmitter和Output 模块

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

定义输出：

@Output() addItem = new EventEmitter();

触发：

this.addItem.emit(this.user);

父组件定义addItem事件

<app-addItem (addItem)="onAdditem($event)"></app-addItem>

当子组件emit触发父组件的自定义事件addItem时，会触发父组件的onAdditem方法