组件间传值

一、输入属性（父组件向子组件传值）

比如主组件向Home组件传递数据：

父组件传递数据：

// app.component.html 主组件
<app-home messageText="这是主组件传递的数据"></app-home>

子组件接收数据：

// home.component.ts
// 修饰器，将messageText修饰为外部传入的属性
@Input()
// 定义一个属性，未给值
messageText: string

// home.component.html
<p>{{messageText}}</p>

注意：装饰器@Input需要先引入才能使用。

将主组件传入的字符串变为动态属性：

主组件在调用home组件的时候有两种方式：

<!--方式一-->
<app-home messageText="{{text}}"></app-home>

<!--方式二-->
<app-home [messageText]="text"></app-home>

给输入属性改名

给Input装饰器加个参数就是新的名字。

@Input('mt');
messageText:string;

// 调用的时候
<app-message [mt]="text"></app-massage>

二、输出属性（子组件向父组件传值）

示例：Home组件调用child组件。

1、子组件发送数据

child组件

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

export class ChildComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

    // 装饰为输出属性
  @Output()
    // childData为属性名，发给父组件的数据为string类型
  childData: EventEmitter<string> = new EventEmitter();

    // 点击按钮发送数据(不需要事件名，事件名就是输出属性名。)
  send() {
    this.childData.emit('子组件发给父组件的数据');
  }

}

不需要事件名，事件名就是输出属性名。

2、父组件接收数据

Home组件引入child组件

<app-child (childData)="getData($event)"></app-child>

触发接收子组件的数据的事件名就是输出属性名。

$event （是固定写法），用来存放子组件发来的数据。

export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

    // 接收子组件的数据
  getData(data) {
    console.log(data);
  }

}

三、子组件互相传值

1、中间人模式

子组件A --> 父组件 --> 子组件B