组件间的数据传递方式有很多，这里只介绍几种常用场景下的数据传递方式，以方便初学者学习理解一点组件间数据传递的知识，若有不准确之处，欢迎指正，大神请轻喷，废话不多说了，开整！

1. 父组件到子组件的数据传递

父组件向子组件数据传递的最简便的方式是通过子组件的输入属性流入子组件，并在子组件中完成拦截接收，从而实现由外到内的数据传递（@Input输入属性在这里就不多做介绍，它在父到子组件的作用，如下图，像探针一样获取数据并传递到子组件内部）
下面我们先看下示例：

父组件准备
首先在父组件(app-root)中定义需要传递的数据如示例中的showNum ,然后将数据与子组件的value进行绑定，如下代码所示

//app.component.html

<div style="text-align:center" >
 <h1>
   Welcome to {{ title }}!
 <br/>
<button (click)="children.fn()">通过#children获取子组件的方法</button>
<br/>
<button (click)="onclick()">通过@viewChild获取子组件的方法</button>
<content #children></content>
   <square [value]="showNum"></square>
   <broad [options]="broadNum"   (onCollect)='collectNum($event)'></broad>
 </h1>
</div>

//app.component.ts
import { Component,ViewChild } from '@angular/core';
import { ContentComponent } from './component/content.component/content.component';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 @ViewChild(ContentComponent) child: ContentComponent;
 title = 'app';
 broadNum = [0,1,2,3,4,5,6,7,8];
 showNum = '1';
 collectNum(num){
   this.showNum = num;
 }
 onclick(){
   this.child.fn();
 }
}

子组件接收

然后在子组件中通过@input装饰器来获取value，然后在组件数据change回调中将value值更新到子组件的视图，完成一次父组件到子组件的数据传递（说明：本示例中使用ngOnChanges监听数据变化更新视图，你也可以使用setter拦截输入属性实现数据的拦截）

//square.component.html
<button class="square">
 {{square.value}}
</button>

// square.component.ts
import { Component,Input,OnInit,OnChanges,SimpleChanges} from '@angular/core';
@Component({
 selector: 'square',
 templateUrl: './square.component.html',
 styleUrls: ['./square.component.css']
})
export class SquareComponent implements OnInit, OnChanges{
 square:object  = {
   value:'12'
 };
 @Input() value:string;
 ngOnChanges(changes: SimpleChanges) {
   // 外部修改show属性的处理，初始定义在ngOnInit中处理
   if (changes['value']) {
      this.square.value = this.value
   }
 }
}

本转载自 Think体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/QBYWSVi0DDKKNf1GLC5sTw

创作场景

Angular2 组件间的数据传递，这几种姿势你知道吗（一）