angular组件之间的通讯

1、组件建立

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

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

2、了解@Input和@Output()

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

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

3、父组件向子组件传值（@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() { } }

4、子组件向父组件传值（@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;
  }
}