Comment utiliser l'entrée et la sortie Angular4

Cette fois, je vais vous montrer comment utiliser l'entrée et la sortie Angular4, et quelles sont les précautions lors de l'utilisation de l'entrée et de la sortie Angular4. Ce qui suit est un cas pratique, jetons un coup d'œil.

Entrée Angular4Propriétés

Les attributs d'entrée sont généralement utilisés par les composants parents pour transmettre des informations aux composants enfants

Par exemple : nous transmettons le code stock du composant parent au composant enfant. Nous appelons ici le composant enfant app-order

. Déclarez d'abord la valeur qui doit être transmise depuis le composant parent dans app.order.component.ts

order.component.ts

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

commande.component.html

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

Ensuite, nous devons transmettre la valeur

au composant enfant

dans le composant parent (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 pour lier 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.

Propriétés de sortie Angular4

Les attributs de sortie doivent être utilisés lorsqu'un 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 de composants enfants

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

prix.quote.html

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

Ensuite on reçoit 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:'2.2-2'}}
</p>

La liaison d'événement est la même que la liaison d'événement native, les deux mettent 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.

Pour faire simple, le composant enfant émet l'événement priceChange via submit et transmet la valeur. Le composant parent déclenchera l'événement priceChange et recevra la valeur lors de l'utilisation du composant enfant.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Ajouter une boîte de dialogue contextuelle dans l'applet WeChat

Méthode asynchrone d'implémentation JS que les novices doivent lire

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!