angular4----组件间通信

背景

     angular是组件化的开发,一个页面可能由多个组件组成,如果组件间没有数据的传递,估计也没必要将一个页面写成多个组件了,涉及到组件间的数据通信就需要用到output和input,下面具体讲讲两个组件间该如何使用.使用前需先引入:

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

举例

    现在有一个Cat组件和Girl组件,Cat需要吃鱼,Girl把鱼给Cat,那么在Cat组件的ts中声明一个Input变量:

@Component({   selector:'cat',   templateUrl:'cat.html',   styleUrls:['cat.css']})export class CatComponent{   @Input() fish:Array<string>;}

    在Girl这个组件中我们在ts中有一个Array<String>类型的变量,我们将要把这个变量传递给Cat:

@Component({   selector:'girl',   templateUrl:'girl.html',   styleUrls:['girl.css']})export class GirlComponent{    fish:Array<string>=["大鱼","小鱼"];}

  在Girl的html中写(等号左侧的为另一个组件的内容,等号右侧的为本组件的变量):

  <cat [fish]="fish"></cat>