angular组件之间的通信

一、组件创建

直接使用 ng g component 的命令创建组件，会自动生成组件所需的文件，方便快捷。

// 父组件
ng g component parent
// 子组件
ng g component parent/child

二、了解@Input和@Output()

@Input：将父作用域中的值“输入”到子作用域中，之后子作用域进行相关处理

@Output：子作用域触发事件执行响应函数，而响应函数方法体则位于父作用域中，相当于将事件“输出”到父作用域中，在父作用域中处理。Output一般都是一个EventEmitter的实例，使用实例的emit方法将参数emit到父组件中，触发父组件中对应的事件。

三、父组件向子组件传值（@input()）

使用 @Input() 让子组件知道哪个是输入的属性，对应vue中的props。

父组件：

//parent.component.html
<div class="parent-style">
  <h1>我是父组件</h1>
  <app-child [sendMsg]="msg"></app-child>   //sendMsg任意命名
</div>

//parent.component.ts

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  public msg:string = '我是父组件传递过来的数据';  //需要传递的数据
  constructor() { }

  ngOnInit() {
  }

}

子组件：

//child.component.html
<div class="child-style">
  <h3>我是子组件</h3>
  <p>{{sendMsg}}</p> //查看页面数据是否显示？
</div>
//child.component.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() sendMsg:string; //告诉组件，sendMsg是父组件传进来的数据
  constructor() { }

  ngOnInit() {
  }

}

四、子组件向父组件传值（@Output()）

子组件：

//child.component.html
<div class="child-style">
  <button type="button" (click)="send()">点击触发</button>
</div>
//child.component.ts
import { Component, OnInit ,Output,EventEmitter} from '@angular/core';//引入Output

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Output() private outer = new EventEmitter(); //输出属性，需要定义成事件
  public info = "子组件消息";
  constructor() { }

  ngOnInit() {
  }
  send(){
    this.outer.emit(this.info);//通过emit将信息发射出去
  }
}

父组件：

//parent.component.html
<div class="parent-style">
  <app-child (outer)="getData($event)"></app-child>//事件绑定获取数据
  <p>{{msg}}</p>
</div>
//parent.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  msg:string;
  constructor() { }

  ngOnInit() {
  }
  getData(data){
    this.msg = data;
  }
}