Angular4의 입력 속성과 출력 속성에 대한 자세한 설명-JS 튜토리얼-php.cn

Angular4의 입력 속성과 출력 속성에 대한 자세한 설명

小云云

풀어 주다： 2017-12-12 10:51:08

원래의

1826명이 탐색했습니다.

이 글은 주로 Angular4의 입력 속성과 출력 속성을 소개하며, Angular4 입력 속성과 출력 속성의 개념, 기능, 관련 사용법을 예시 형식으로 자세히 분석하여 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 모두에게 도움이 될 수 있습니다.

Angular4 입력 속성

입력 속성은 일반적으로 상위 구성 요소에서 하위 구성 요소로 정보를 전달하는 데 사용됩니다.

예: 상위 구성 요소에서 하위 구성 요소로 스톡 코드를 전달하며 여기서 하위 구성 요소는 app-order라고 합니다.

먼저 App.order.comComponent.ts는 상위 구성 요소

order.comComponent.ts

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

로그인 후 복사

order.comComponent.html

에서 전달해야 하는 값을 선언합니다.

<p>这里是子组件</p>
<p>股票代码为{{stockCode}}</p>
<p>股票总数为{{amount}}</p>

로그인 후 복사

그런 다음 부모 구성 요소(app.comComponent)의 하위 구성 요소에 값을 전달해야 합니다.

여기에서는 Angular 양방향 데이터 바인딩을 사용하여 사용자가 입력한 값을 컨트롤러의 주식에 바인딩합니다. 그런 다음 하위 구성 요소로 전달되고, 하위 구성 요소는 이를 수신한 후 페이지에 표시합니다.

Angular4 출력 속성

출력 속성은 하위 구성 요소가 상위 구성 요소에 정보를 전달해야 할 때 필요합니다.

예를 들어 증권 거래소에서 실시간 주식 가격을 얻을 때 이 정보를 외부에서도 얻을 수 있기를 바랍니다. 편의상 여기의 실시간 주가는 난수로 시뮬레이션하였습니다. 여기에서 하위 구성 요소를 app.price.quote라고 부릅니다.

EventEmitter를 사용하여 하위 구성 요소에서 이벤트를 내보냅니다

price.quote.ts

...
stock: string
...

로그인 후 복사

price.quote.html

<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amount]="100"></app-order>

로그인 후 복사

그런 다음 상위 구성 요소

app.comComponent.html

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

로그인 후 복사

에서 이벤트를 수신합니다. 이벤트 바인딩은 기본 이벤트 바인딩과 동일하며 둘 다 이벤트 이름을 ()에 넣습니다.

app.comComponent.ts

<p>
 这里是报价组件
</p>
<p>
 股票代码是{{stockCode}}
</p>
<p>
 股票价格是{{price | number:'2.2-2'}}
</p>

로그인 후 복사

여기서 이벤트 유형은 하위 구성요소가 전달하는 이벤트 유형입니다.

간단히 말하면 하위 구성 요소는 내보내기를 통해 가격 변경 이벤트를 내보내고 값을 전달합니다. 상위 구성 요소는 하위 구성 요소를 사용할 때 가격 변경 이벤트를 트리거하고 값을 받습니다.