Angular4 입력 및 출력을 사용하는 방법

이번에는 Angular4 입출력 사용법과 Angular4 입출력 사용 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

Angular4 입력Properties

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

예를 들어, 상위 구성 요소에서 하위 구성 요소로 스톡 코드를 전달합니다. 여기서는 하위 구성 요소를 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 출력 속성

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

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

하위 구성 요소를 호출해 보겠습니다.

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

가격.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
 )
}

가격.quote.html

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

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

app.comComponent.html

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

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

app.comComponent.ts

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

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

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

WeChat 애플릿에 팝업 대화 상자 추가

js에서 비동기 메서드를 구현하려면 초보자가 꼭 봐야 할 내용

위 내용은 Angular4 입력 및 출력을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!