집 > 기사 > 웹 프론트엔드 > Angular4의 입력 속성 및 출력 속성(자세한 튜토리얼)

Angular4의 입력 속성 및 출력 속성(자세한 튜토리얼)

亚连원래의: 2018-06-23 16:17:171213검색

이 글은 주로 Angular4의 입력 속성과 출력 속성을 소개하며, 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)의 하위 구성 요소에 값을 전달해야 합니다.

app.comComponent.ts

...
stock: string
...

app.comComponent.html

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

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

Angular4 출력 속성

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

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

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

price.quote.ts

export class PriceQuoteComponent implements OnInit{
 stockCode: string = &#39;IBM&#39;;
 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:&#39;2.2-2&#39;}}
</p>

그런 다음 상위 구성 요소 이벤트에서 이를 수신합니다

app.comComponent.html

<app-price-quote (priceChange)="priceQuoteHandler($event)"></app-price-quote>
<p>
 这是在报价组件外， 股票代码是{{priceQuote.stokcCode}}，
 股票价格是{{priceQuote.lastPrice | number:&#39;2.2-2&#39;}}
</p>

이벤트 바인딩은 네이티브 이벤트 바인딩과 동일하며 둘 다 () 안에 이벤트 이름을 넣습니다.

app.comComponent.ts

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

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

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Angular4의 입력 속성 및 출력 속성(자세한 튜토리얼)

관련 기사