컴포넌트 간 통신

aaa에서 template를 그릴때 input이 필요하다.

@input 으로 필요한 데이터들을 정의하고

 

bbb에서는 필요한 값들을 <aaa컴포넌트  [input이름]="값" > 형식으로 보내줄수있다.

aaa.component.ts
============================================================
  @Component({
    selector : 'aaa-component'
    template:`
      {{data1}} + {{hero}}
    `
  })

  export class CompAAA{
    @Input data1:string;
    @Input('data2') hero : Hero
  }	

============================================================


bbb.component.ts
============================================================
   @Component({
    selector : 'app-component'
    template:`
      <input #inputData (click)="inputDataClick(inputData.value)">
      
      <aaa-component *ngFor="let hero of HEROES "
                     [data1]="data1"
                     [data2]:"hero" >
      </app-component>
    `  
    <
  })

  export class CompAAA{
     data1:string,
     Herores:HEROES,
     
     inputDataClick(data:string){
       this.data1= data;
     }
     ngonInit(){}
  }	

============================================================