Angular 4 의 입력 속성 과 출력 속성 인 스 턴 스 상세 설명

이 실례 는 Angular 4 의 입력 속성 과 출력 속성 을 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
Angular 4 입력 속성
입력 속성 은 보통 부모 구성 요소 가 하위 구성 요소 에 정 보 를 전달 하 는 데 사 용 됩 니 다.
밤 들 기:우 리 는 부모 구성 요소 에서 하위 구성 요소 에 주식 코드 를 전달 합 니 다.여기 있 는 하위 구성 요 소 는 app-order 라 고 합 니 다.
우선 app.order.coponent.ts 에서 부모 구성 요소 가 전달 해 야 할 값 을 설명 합 니 다.
order.component.ts

...
@Input()
stockCode: string
@Input()
amount: string
...

order.component.html

<p>      </p>
<p>     {{stockCode}}</p>
<p>     {{amount}}</p>

그리고 부모 구성 요소(app.coponent)에서 하위 구성 요소 에 값 을 전달 해 야 합 니 다.
app.component.ts

...
stock: string
...

app.component.html

<input type="text" placeholder="       " [(ngModel)]="stock">
<app-order [stockCode]="stock" [amount]="100"></app-order>

여기 서 저 희 는 Angular 의 양 방향 데이터 바 인 딩 을 사용 하여 사용자 가 입력 한 값 과 컨트롤 러 의 stock 를 바 인 딩 합 니 다.그리고 하위 구성 요소 에 전달 합 니 다.하위 구성 요 소 는 받 은 후에 페이지 에 표 시 됩 니 다.
Angular 4 출력 속성
하위 구성 요소 가 부모 구성 요소 에 정 보 를 전달 해 야 할 때 출력 속성 을 사용 해 야 합 니 다.
밤 을 들 어:우리 가 증권거래소 에서 주식 의 실시 간 가격 을 얻 었 을 때 외부 에서 도 이 정 보 를 얻 을 수 있 기 를 바 랍 니 다.편리 함 을 위해 서 이곳 의 실시 간 주식 가격 을 우 리 는 무 작위 수 를 통 해 모 의 한다.여기 하위 구성 요 소 는 app.price.quote 라 고 합 니 다.
EventEmitter 를 사용 하여 하위 구성 요소 에서 밖으로 이벤트 발사
price.quote.ts

export class PriceQuoteComponent implements OnInit{
 stockCode: string = 'IBM';
 price: number;
 //  EventEmitter    
 //                
 //priceChange     
 @Output()
 priceChange:EventEmitter<PriceQuote> = new EventEmitter();
 constructor(){
  setInterval(() => {
   let priceQuote = new PriceQuote(this.stockCode, 100*Math.random());
   this.price = priceQuote.lastPrice;
   //    
   this.priceChange.emit(priceQuote);
  })
 }
 ngInit(){
 }
}
//     
//stockCode     ，lastPrice     
export class PriceQuote{
 constructor(public stockCode:string,
    public lastPrice:number
 )
}

price.quote.html

<p>
        
</p>
<p>
      {{stockCode}}
</p>
<p>
      {{price | number:'2.2-2'}}
</p>

이어서 우 리 는 부모 구성 요소 에서 이 벤트 를 받 습 니 다
app.component.html

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
<div>
         ，      {{priceQuote.stokcCode}}，
      {{priceQuote.lastPrice | number:'2.2-2'}}
</div>

이벤트 바 인 딩 은 네 이 티 브 이벤트 바 인 딩 과 같 습 니 다.모두 이벤트 이름 을()에 두 었 습 니 다.
app.component.ts

export class AppComponent{
 priceQuote:PriceQuote = new PriceQuote('', 0);
 priceQuoteHandler(event:PriceQuote){
  this.priceQuote = event;
 }
}

이 이벤트 형식 은 하위 구성 요소 가 이 벤트 를 전달 하 는 형식 입 니 다.
쉽게 말 하면 하위 구성 요소 가 emit 를 통 해 이벤트 priceChange 를 발사 하고 값 을 전달 하 는 것 입 니 다.부모 구성 요 소 는 하위 구성 요 소 를 사용 할 때 priceChange 이 벤트 를 촉발 하여 값 을 받 습 니 다.
AngularJS 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.AngularJS 명령 조작 기법 총화,AngularJS 입문 및 진급 강좌과AngularJS MVC 구조 총화
본 고 에서 말 한 것 이 여러분 의 AngularJS 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.