【Angular】组件之间通讯 Input & Output

Input  【 父组件向子组件传入数据 】

父组件：

1.  准备数据（或引入服务中获取数据）

import { Hero } from '../hero';                                   // 定义类型

import { HEROES } from '../mock-hero';                    // json数据

heroes = HEROES;

2. 公共接口（属性绑定）

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

子组件：

1. 引入input获取数据

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

@Input() hero: Hero;

2. 展示数据

<label>
        name: <input [(ngModel)]="hero.name">

</label>

注：使用双向绑定[( ngModel )]，必须引入form模块

import { FormsModule } from '@angular/forms';

imports: [
    FormsModule
  ],

Output  【 子组件向父组件传出数据 】

父组件：

1. 公共接口

<app-child  (outer)="receive($event)"></app-child>

2. 方法

    receive(msg: string){
        this.msgFromChild = msg;
    }

子组件：

1. 引入output

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

2.输出output

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

3. 触发事件

<button (click)="sendToParent()">发送给父组件</button>

  sendToParent(){
    this.outer.emit("message from child") ;
  }