Propriétés d'entrée et propriétés de sortie dans Angular4 (tutoriel détaillé)

Cet article présente principalement les attributs d'entrée et les attributs de sortie d'Angular4, et analyse en détail les concepts, les fonctions et les compétences d'utilisation associées des attributs d'entrée et de sortie d'Angular4 sous forme d'exemples. Les amis dans le besoin peuvent s'y référer

Cet article décrit les propriétés d'entrée et les propriétés de sortie d'Angular4 avec des exemples. Partagez-le avec tout le monde pour votre référence, comme suit :

Attributs d'entrée Angular4

Les attributs d'entrée sont généralement utilisés à partir des composants parents pour composants enfants Transmission d'informations

Par exemple : nous transmettons le code stock du composant parent au composant enfant Le composant enfant ici est appelé app-order

Tout d'abord, dans. app.order.component. Déclarez dans ts la valeur qui doit être transmise à partir du composant parent

order.component.ts

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

order.component.html

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

Ensuite, nous devons transmettre des valeurs aux sous-composants du composant (app.component)

app.component.ts

...
stock: string
...

app.component.html

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

Ici, nous utilisons la liaison de données bidirectionnelle d'Angular qui lie la valeur saisie par l'utilisateur au stock dans le contrôleur. Ensuite, il est transmis au sous-composant, et le sous-composant l'affiche sur la page après l'avoir reçu.

Attribut de sortie Angular4

L'attribut de sortie est nécessaire lorsque le composant enfant doit transmettre des informations au composant parent.

Par exemple : lorsque nous obtenons le prix en temps réel d'une action en bourse, nous espérons que cette information pourra également être obtenue de l'extérieur. Pour plus de commodité, le cours de l’action en temps réel est ici simulé par un nombre aléatoire. Nous appelons ici le sous-composant app.price.quote

Utilisez EventEmitter pour émettre des événements à partir du sous-composant

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:&#39;2.2-2&#39;}}
</p>

Ensuite, nous recevons l'événement dans le composant parent

app.component.html

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

Liaison d'événement et native La liaison d'événement c'est pareil, en mettant le nom de l'événement entre ().

app.component.ts

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

Le type d'événement ici est le type d'événement transmis par le sous-composant.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Introduction détaillée à l'utilisation de ref ($refs) dans Vue.js

Interprétation détaillée du père- son communication dans vue

Comment implémenter le composant clavier numérique à l'aide de Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!