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

//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.tsimport { 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(); }}

//square.component.html<button class="square"> {{square.value}}</button>
// square.component.tsimport { 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   } }}