背景

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>;
}

@Component({
   selector:'girl',templateUrl:'girl.html',styleUrls:['girl.css']
})

export class GirlComponent{
    fish:Array<string>=["大鱼","小鱼"];
}

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

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